<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript" src="ref.js"></script>
<link rel="stylesheet" type="text/css" href="ref.css" />
<title>Highcharts Stock - API Reference</title>

</head>
<body>

<div id="reference-loading">Indexing the members. This may take some seconds...</div>

<div id="content" class="hidden"">
<div id="nav">
	<div class="header">
	<h1>Highcharts Stock API Reference</h1>
	<a href="/">&lt;&lt; Go to the Highcharts home page</a>
	<p>Navigate the structure by clicking plus and minus. Click the blue object names for details.</p>

	</div>
	<hr/>
	<h3>The options object</h3>
	<div id="options"></div>
	
	<hr/>
	<h3>Methods and properties</h3>
	<div id="methods-and-properties-toc">
	<ul style="margin-left: 0">

		<li><a href="#highcharts-object">Highcharts (namespace)</a></li>
		<li><a href="#renderer">Renderer</a></li>
		<li><a href="#element">Element</a></li>
		<li><a href="#chart-object">Chart</a></li>
		<li><a href="#axis-object">Axis</a></li>
		<li><a href="#series-object">Series</a></li>

		<li><a href="#point-object">Point</a></li>
	</ul>	
	</div>
	
</div>

<!-- Base fiddle: http://jsfiddle.net/CAKQH/ -->

<div id="details">
<div class="section">
	<h2>chart</h2>
	<div class="section-description">

	Options regarding the chart area and plot area as well as general chart options.
	</div>
	<div class="member">
		<span class="name">alignTicks</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			When using multiple axis, the ticks of two or more opposite axes will 
			automatically be aligned by adding ticks to the axis or axes with the least
			ticks. This can be prevented by setting <code>alignTicks</code> to false.
			If the grid lines look messy, it's a good idea to hide them for the
			secondary axis by setting <code>gridLineWidth</code> to 0.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/alignticks-true/">True by default</a>, 
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/alignticks-false/">false</a>.
		</div>
	</div>
	<div class="member">
		<span class="name">animation</span>
		<span class="type">Boolean|Object</span>

		<span class="default">true</span>
		<div class="description">
			<p>Set the overall animation for all chart updating. Animation can be disabled throughout
			the chart by setting it to false here. It can be overridden for each individual
			API method as a function parameter. The only animation not affected by this option is the 
			initial series animation, see <a class="internal" href="#plotOptions-series">plotOptions.series</a>
			=> animation.</p>
			
			<p>The animation can either be set as a boolean or a configuration object. If <code>true</code>,
			it will use the 'swing' jQuery easing and a duration of 500 ms. If used as a configuration object,
			the following properties are supported: 
			<dl>

				<dt>duration</dt>
				<dd>The duration of the animation in milliseconds.</dd>
				
				<dt>easing</dt>
				<dd>When using jQuery as the general framework, the easing can be set to <code>linear</code> or
				<code>swing</code>. More easing functions are available with the use of jQuery plug-ins, most notably
				the jQuery UI suite. See <a href="http://api.jquery.com/animate/">the jQuery docs</a>. When using 
				MooTools as the general framework, use the property name <code>transition</code> instead 
				of <code>easing</code>.</dd>

			</dl>
		</div>
		
		
	</div>
	<div class="member">
		<span class="name">backgroundColor</span>
		<span class="type">Color</span>
		<span class="default">"#FFFFFF"</span>

		<div class="description">
			The background color or gradient for the outer chart area.
		</div>
		
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/backgroundcolor-color/">Color</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/backgroundcolor-gradient/">gradient</a> 
		</div>
	</div>
	<div class="member">

		<span class="name">borderColor</span>
		<span class="type">Color</span>
		<span class="default">"#4572A7"</span>
		<div class="description">
			The color of the outer chart border. The border is painted using vector graphic 
			techniques to allow rounded corners.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/border/">Brown border</a> 
		</div>

	</div>
	<div class="member">
		<span class="name">borderRadius</span>
		<span class="type">Number</span>
		<span class="default">5</span>
		<div class="description">
			The corner radius of the outer chart border.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/border/">10px radius</a> 
		</div>
	</div>
	<div class="member">
		<span class="name">borderWidth</span>
		<span class="type">Number</span>
		<span class="default">0</span>

		<div class="description">
			The pixel width of the outer chart border. The border is painted using vector graphic 
			techniques to allow rounded corners.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/border/">2px border</a> 
		</div>
	</div>
	<div class="member">
		<span class="name">className</span>

		<span class="type">String</span>
		<span class="default">""</span>
		<div class="description">
			A CSS class name to apply to the charts container <code>div</code>, allowing unique CSS styling
			for each chart.
		</div>
	</div>
	<div class="member">

		<span class="name">events</span>
		<span class="type">chart.events</span>
		<span class="default"></span>
		<div class="description">
			Event listeners for chart events.
		</div>
	</div>
	<div class="member">

		<span class="name">height</span>
		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			An explicit height for the chart. By default the height is calculated from the offset
			height of the containing element.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/height/">300px height</a> 
		</div>

	</div>
	<div class="member">
		<span class="name">ignoreHiddenSeries</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			If true, the axes will scale to the remaining visible series once one series
			is hidden. If false, hiding and showing a series will not affect the axes or
			the other series. For stacks, once one series within the stack is hidden, the
			rest of the stack will close in around it even if the axis is not affected.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/ignorehiddenseries-true/">True by default</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/ignorehiddenseries-false/">false</a>
		</div>
	</div>
	<div class="member">
		<span class="name">margin</span>
		<span class="type">Array</span>

		<span class="default">[null]</span>
		<div class="description">
			<p>The margin between the outer edge of the chart and the plot area. The numbers in
			the array designate top, right, bottom and left respectively. Use the options
			<code>marginTop</code>, <code>marginRight</code>, <code>marginBottom</code> and
			<code>marginLeft</code> for shorthand setting of one option.</p>

			<p>Since version 2.1, the margin is 0 by default. The actual space is dynamically calculated 
			from the offset of axis labels, axis title, title, subtitle and legend in addition
			to the <code>spacingTop</code>, <code>spacingRight</code>, <code>spacingBottom</code> and
			<code>spacingLeft</code> options.</p>
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/margin-zero/">Zero margins</a>  
		</div>
	</div>
	<div class="member">
		<span class="name">marginTop</span>
		<span class="type">Number</span>
		<span class="default">null</span>

		<div class="description">
			The margin between the top outer edge of the chart and the plot area. Use this to set a fixed
			pixel value for the margin as opposed to the default dynamic margin. See also <code>spacingTop</code>.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/margintop/">100px top margin</a>  
		</div>
	</div>
	<div class="member">

		<span class="name">marginRight</span>
		<span class="type">Number</span>
		<span class="default">50</span>
		<div class="description">
			The margin between the right outer edge of the chart and the plot area. Use this to set a fixed
			pixel value for the margin as opposed to the default dynamic margin. See also <code>spacingRight</code>.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/marginright/">100px right margin</a>  
		</div>
	</div>
	<div class="member">
		<span class="name">marginBottom</span>
		<span class="type">Number</span>
		<span class="default">70</span>

		<div class="description">
			The margin between the bottom outer edge of the chart and the plot area. Use this to set a fixed
			pixel value for the margin as opposed to the default dynamic margin. See also <code>spacingBottom</code>.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/marginbottom/">100px bottom margin</a>  
		</div>
	</div>
	<div class="member">

		<span class="name">marginLeft</span>
		<span class="type">Number</span>
		<span class="default">80</span>
		<div class="description">
			The margin between the left outer edge of the chart and the plot area. Use this to set a fixed
			pixel value for the margin as opposed to the default dynamic margin. See also <code>spacingLeft</code>.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/marginleft/">150px left margin</a>  
		</div>
	</div>
	<div class="member">
		<span class="name">panning</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>

		<div class="description">
			Allow panning the zoomed area by click and drag on the chart. When the <code>zoomType</code> option is set,
			panning is disabled.
		</div>
	</div>
	<div class="member">
		<span class="name">plotBackgroundColor</span>
		<span class="type">Color</span>

		<span class="default">null</span>
		<div class="description">
			The background color or gradient for the plot area.
		</div>
		
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/plotbackgroundcolor-color/">Color</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/plotbackgroundcolor-gradient/">gradient</a> 
		</div>
	</div>

	<div class="member">
		<span class="name">plotBackgroundImage</span>
		<span class="type">String</span>
		<span class="default">null</span>
		<div class="description">
			The URL for an image to use as the plot background. To set an image as the background
			for the entire chart, set a CSS background image to the container element.
		</div>
		
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/plotbackgroundimage/">Skies</a>
		</div>
	</div>
	<div class="member">
		<span class="name">plotBorderColor</span>
		<span class="type">Color</span>
		<span class="default">"#C0C0C0"</span>

		<div class="description">
			The color of the inner chart or plot area border.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/plotborder/">Blue border</a>
		</div>
	</div>
	<div class="member">
		<span class="name">plotBorderWidth</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The pixel width of the plot area border.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/plotborder/">2px border</a>
		</div>

	</div>
	<div class="member">
		<span class="name">plotShadow</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			Whether to apply a drop shadow to the plot area. Requires that plotBackgroundColor
			be set.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/plotshadow/">Plot shadow</a>
		</div>
	</div>
	<div class="member">
		<span class="name">reflow</span>
		<span class="type">Boolean</span>

		<span class="default">true</span>
		<div class="description">
			Whether to reflow the chart to fit the width of the container div on resizing the window.
		</div>
		
		<div class="demo">
			Move the bar between the JavaScript frame and the Preview frame to see the effect: 
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/reflow-true/">True by default</a>, 
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/reflow-false/">false</a>.
		</div>

	</div>
	<div class="member">
		<span class="name">renderTo</span>
		<span class="type">String|Object</span>
		<span class="default">null</span>
		<div class="description">
			The HTML element where the chart will be rendered. If it is a string, the element by that
			id is used. The HTML element can also be passed by direct reference.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/renderto-string/">String</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/renderto-object/">object reference</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/renderto-jquery/">object reference through jQuery</a>,
		</div>
	</div>
	
	<div class="member">
		<span class="name">selectionMarkerFill</span>

		<span class="type">Color</span>
		<span class="default">rgba(69,114,167,0.25)</span>
		<div class="description">
			The background color of the marker square when selecting (zooming in on) an area of the chart.
		</div>
	</div>
	<div class="member">
		<span class="name">shadow</span>

		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			Whether to apply a drop shadow to the outer chart area. Requires that 
			backgroundColor be set.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/shadow/">Shadow</a>
		</div>

	</div>
	<div class="member">
		<span class="name">spacingTop</span>
		<span class="type">Number</span>
		<span class="default">10</span>
		<div class="description">
			<p>The space between the top edge of the chart and the content (plot area, axis title and labels, title, subtitle or 
			legend in top position).</p> 
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/spacingtop/">A top spacing of 100</a>
		</div>
	</div>
	<div class="member">
		<span class="name">spacingRight</span>
		<span class="type">Number</span>

		<span class="default">10</span>
		<div class="description">
			<p>The space between the right edge of the chart and the content (plot area, axis title and labels, title, subtitle or 
			legend in top position).</p> 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/spacingright/">Spacing set to 100</a>
		</div>
	</div>

	<div class="member">
		<span class="name">spacingBottom</span>
		<span class="type">Number</span>
		<span class="default">15</span>
		<div class="description">
			<p>The space between the bottom edge of the chart and the content (plot area, axis title and labels, title, subtitle or 
			legend in top position).</p> 
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/spacingbottom/">Spacing bottom set to 100</a>. 
		</div>
	</div>
	<div class="member">
		<span class="name">spacingLeft</span>
		<span class="type">Number</span>
		<span class="default">10</span>

		<div class="description">
			<p>The space between the left edge of the chart and the content (plot area, axis title and labels, title, subtitle or 
			legend in top position).</p> 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/spacingleft/">Spacing left set to 100</a> 
		</div>
	</div>
	<div class="member">
		<span class="name">style</span>

		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			Additional CSS styles to apply inline to the container <code>div</code>. Note that since the default
			font styles are applied in the renderer, it is ignorant of the individual chart 
			options and must be set globally. Defaults
			to:
<pre>style: {
	fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
	fontSize: '12px'
}</pre>
		</div>
		
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/style/">Using a serif type font</a> 
		</div>
	</div>
	<div class="member">
		<span class="name">type</span>
		<span class="type">String</span>
		<span class="default">"line"</span>

		<div class="description">
			The default series type for the chart. Can be one of line, spline, area, areaspline, 
			column, scatter, ohlc and candlestick.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/type/">Areaspline</a> 
		</div>
	</div>
	<div class="member">
		<span class="name">width</span>

		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			An explicit width for the chart. By default the width is calculated from the offset
			width of the containing element.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/width/">800px wide</a>
		</div>

	</div>
	<div class="member">
		<span class="name">zoomType</span>
		<span class="type">String</span>
		<span class="default">""</span>
		<div class="description">
			Decides in what dimentions the user can zoom by dragging the mouse. Can 
			be one of <code>x</code>, <code>y</code> or <code>xy</code>. 
		</div>

		
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/base">None by default</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/zoomtype-x/">x</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/zoomtype-y/">y</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/zoomtype-xy/">xy</a>
		</div>
	</div>
</div>

<div class="section">
	<h2>chart.events</h2>
	<div class="section-description">
	Event listeners for the chart.
	</div>
	<div class="member">
		<span class="name">addSeries</span>
		<span class="type">Function</span>

		<span class="default"></span>
		<div class="description">
			Fires when a series is added to the chart after load time, using the <code>addSeries</code>
			method. The <code>this</code> keyword refers to the 
			chart object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts. Through <code>event.options</code>

			you can access the series options that was passed to the <code>addSeries</code> 
			method. Returning false prevents the series from being added.
		</div>
		
		
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/events-addseries/">Alert on add series</a>
		</div>
	</div>
	<div class="member">

		<span class="name">click</span>
		<span class="type">Function</span>
		<span class="default"></span>

		<div class="description">
			<p>Fires when clicking on the plot background. The <code>this</code> keyword refers to the 
			chart object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts.</p>

			<p>Information on the clicked spot can be found through <code>event.xAxis</code> and 
			<code>event.yAxis</code>, which are arrays containing the axes of each dimension
			and each axis' value at the clicked spot. The primary axes are <code>event.xAxis[0]</code>
			and <code>event.yAxis[0]</code>. Remember the unit of a datetime axis is milliseconds
			since 1970-01-01 00:00:00.</p>
<pre>click: function(e) {
	console.log(
		Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.xAxis[0].value), 
		e.yAxis[0].value
	)
}</pre>
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/events-click/">Alert coordinates on click</a>
		</div>
	</div>
	<div class="member">
		<span class="name">load</span>
		<span class="type">Function</span>

		<span class="default"></span>
		<div class="description">
			<p>Fires when the chart is finished loading. The <code>this</code> keyword refers to the 
			chart object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts.</p>
			<p>From version 2.0.4, there is also a second parameter to <code>Highcharts.Chart</code>
			where a callback function can be passed to be executed on chart.load.</p>

		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/events-load/">Alert on chart load</a>
		</div>
	</div>
	<div class="member">
		<span class="name">redraw</span>
		<span class="type">Function</span>

		<span class="default"></span>
		<div class="description">
			Fires when the chart is redrawn, either after a call to chart.redraw() or after
			an axis, series or point is modified with the <code>redraw</code> option set to true. 
			The <code>this</code> keyword refers to the 
			chart object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts. 
		</div>
		
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/events-redraw/">Alert on chart redraw, 
			when adding a series or moving the zoomed range</a>
		</div>
	</div>
	<div class="member">
		<span class="name">selection</span>
		<span class="type">Function</span>
		<span class="default"></span>

		<div class="description">
			<p>Fires when an area of the chart has been selected. Selection is enabled by setting
			the chart's zoomType. The <code>this</code> keyword refers to the 
			chart object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts. The default action for the 
			selection event is to zoom the 
			chart to the selected area. It can be prevented by calling 
			<code>event.preventDefault()</code>.</p>
			<p>Information on the selected area can be found through <code>event.xAxis</code> and 
			<code>event.yAxis</code>, which are arrays containing the axes of each dimension
			and each axis' min and max values. The primary axes are <code>event.xAxis[0]</code>

			and <code>event.yAxis[0]</code>. Remember the unit of a datetime axis is milliseconds
			since 1970-01-01 00:00:00.</p>
			
<pre>selection: function(event) {
	// log the min and max of the primary, datetime x-axis
	console.log(
		Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.xAxis[0].min),
		Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.xAxis[0].max)
	);
	// log the min and max of the y axis
	console.log(event.yAxis[0].min, event.yAxis[0].max);
}</pre>
		</div>
		
		
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/events-selection/">Report on selection and reset</a>
		</div>

	</div>
	
</div>




<div class="section">
	<h2>title</h2>
	<div class="section-description">
	The chart's main title.
	</div>

	
	<div class="member">
		<span class="name">align</span>
		<span class="type">String</span>
		<span class="default">"center"</span>
		<div class="description">
			The horizontal alignment of the title. Can be one of "left", "center" and "right".
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/title-align/">Aligned to the plot area (x = 50px 
			= margin left - spacing left)</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">floating</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>

		<div class="description">
			When the title is floating, the plot area will not move to make space for it.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/title-floating/">true - title on top of the plot area</a>.
		</div>
	</div>
	
	<div class="member">
		<span class="name">margin</span>

		<span class="type">Number</span>
		<span class="default">15</span>
		<div class="description">
			The margin between the title and the plot area, or if a subtitle is present, the
			margin between the subtitle and the plot area.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/title-margin/">A chart title margin of 50</a>.
		</div>

	</div>
	
	<div class="member">
		<span class="name">text</span>
		<span class="type">String</span>
		<span class="default">null</span>
		<div class="description">
			The title of the chart. To disable the title, set the <code>text</code> to <code>null</code>.
		</div>		
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/title-text/">Custom title</a>
		</div>
	</div>	
	
	<div class="member">
		<span class="name">style</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">

			CSS styles for the title. Use this for font styling, but use <code>align</code>,
			<code>x</code> and <code>y</code>for text alignment. Defaults to:
			<pre>{
	color: '#3E576F',
	fontSize: '16px'
}</pre>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/title-style/">Custom color and weight</a>

		</div>
	</div>
	
	<div class="member">
		<span class="name">verticalAlign</span>
		<span class="type">String</span>
		<span class="default">"top"</span>
		<div class="description">

			The vertical alignment of the title. Can be one of "top", "middle" and "bottom".
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/title-verticalalign/">Chart title in bottom right corner</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">x</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The x position of the title relative to the alignment within chart.spacingLeft and chart.spacingRight.
		</div>		
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/title-align/">Aligned to the plot area (x = 50px 
			= margin left - spacing left)</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>
		<span class="default">15</span>
		<div class="description">
			The y position of the title relative to the alignment within chart.spacingTop and chart.spacingBottom.
		</div>

		
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/chart/title-verticalalign/">Chart title in bottom right corner</a>
		</div>
	</div>
</div>


<div class="section">
	<h2>subtitle</h2>
	<div class="section-description">

	The chart's subtitle
	</div>
	
	<div class="member">
		<span class="name">align</span>
		<span class="type">String</span>
		<span class="default">"center"</span>
		<div class="description">
			The horizontal alignment of the subtitle. Can be one of "left", "center" and "right".
		</div>		
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/&sample=chart-subtitle-footnote">Footnote at bottom right of plot area</a>
		</div> 
	</div>
	
	<div class="member">
		<span class="name">floating</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>

		<div class="description">
			When the subtitle is floating, the plot area will not move to make space for it.
		</div>		
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/&sample=chart-subtitle-footnote">Footnote floating at bottom right of plot area</a>
		</div>
	</div>
	<div class="member">
		<span class="name">text</span>

		<span class="type">String</span>
		<span class="default">""</span>
		<div class="description">
			The subtitle of the chart.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/&sample=chart-subtitle-text">Custom subtitle</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/&sample=chart-subtitle-text-formatted">formatted and linked text.</a>

		</div>
	</div>
	<div class="member">
		<span class="name">style</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the title. Exact positioning of the title can be achieved
			by changing the margin property, or by adding <code>position: "absolute"</code> and 
			left and top properties. Defaults to:
			<pre>{
	color: '#3E576F'
}</pre>

		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/&sample=chart-subtitle-style">Custom color and weight</a>
		</div>
	</div>
	<div class="member">
		<span class="name">verticalAlign</span>
		<span class="type">String</span>

		<span class="default">"top"</span>
		<div class="description">
			The vertical alignment of the title. Can be one of "top", "middle" and "bottom".
		</div>				
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/&sample=chart-subtitle-footnote">Footnote at bottomright of plot area</a>
		</div>
	</div>
	
	<div class="member">

		<span class="name">x</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The x position of the subtitle relative to the alignment within chart.spacingLeft and chart.spacingRight.
		</div>		
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/&sample=chart-subtitle-footnote">Footnote at bottomright of plot area</a>

		</div>
	</div>
	
	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>
		<span class="default">25</span>
		<div class="description">

			The y position of the subtitle relative to the alignment within chart.spacingTop and chart.spacingBottom.
		</div>
				
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/&sample=chart-subtitle-footnote">Footnote at bottomright of plot area</a>
		</div>
	</div>
</div>
<div class="section">
	<h2>xAxis</h2>

	<div class="section-description">
	<p>The X axis or category axis. Normally this is the horizontal axis, though if the 
	chart is inverted this is the vertical axis. In case of multiple axes, the xAxis
	node is an array of configuration objects.</p>
	<p>See <a class="internal" href="#axis-object">the Axis object</a> for programmatic
	access to the axis.</p>
	</div>
	<div class="member">
		<span class="name">alternateGridColor</span>

		<span class="type">Color</span>
		<span class="default">null</span>
		<div class="description">
			When using an alternate grid color, a band is painted across the plot area
			between every other grid line.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/alternategridcolor/">Alternate grid color on the Y axis</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">dateTimeLabelFormats</span>
		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			For a datetime axis, the scale will automatically adjust to the appropriate unit.
			This member gives the default string representations used for each unit. For an
			overview of the replacement codes, see dateFormat.
			Defaults to:
<pre>{
	second: '%H:%M:%S',
	minute: '%H:%M',
	hour: '%H:%M',
	day: '%e. %b',
	week: '%e. %b',
	month: '%b \'%y',
	year: '%Y'
}</pre>

			
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/datetimelabelformats/">More information in x axis labels</a>
		</div>
	</div>
	<div class="member">
		<span class="name">endOnTick</span>
		<span class="type">Boolean</span>

		<span class="default">false</span>
		<div class="description">
			Whether to force the axis to end on a tick. Use this option with the <code>maxPadding</code>
			option to control the axis end. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/base">True by default</a> and
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/endontick/">false</a> for Y axis
		</div>

	</div>
	<div class="member">
		<span class="name">events</span>
		<span class="type">xAxis.events</span>
		<span class="default"></span>
		<div class="description">
			A collection of event handlers.
		</div>

	</div>
	<div class="member">
		<span class="name">gridLineColor</span>
		<span class="type">Color</span>
		<span class="default">"#C0C0C0"</span>
		<div class="description">
			Color of the grid lines extending the ticks across the plot area.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/gridlinecolor/">Green lines</a>
		</div>
	</div>
	<div class="member">
		<span class="name">gridLineDashStyle</span>
		<span class="type">String</span>

		<span class="default">Solid</span>
		<div class="description">
			The dash or dot style of the grid lines. For possible values, see <a href="http://jsfiddle.net/cSrgA/">
			this demonstration</a>.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/gridlinedashstyle/">Long dashes</a>

		</div>
	</div>
	<div class="member">
		<span class="name">gridLineWidth</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">

			The width of the grid lines extending the ticks across the plot area.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/gridlinewidth/">2px lines</a>
		</div>
	</div>
	<div class="member">
		<span class="name">gridZIndex</span>

		<span class="type">Number</span>
		<span class="default">1</span>
		<span class="since">1.1</span>
		<div class="description">
			The Z index of the grid lines. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/5uZzk/">A Z index of 4 renders the grid above the graph</a>

		</div>
	</div>
	<div class="member">
		<span class="name">id</span>
		<span class="type">String</span>
		<span class="default">null</span>
		<div class="description">

			An id for the axis. This can be used after render time to get a pointer
			to the axis object through <code>chart.get()</code>.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/id/">Get the object</a>
		</div>
	</div>
	<div class="member">
		<span class="name">labels</span>

		<span class="type">xAxis.labels</span>
		<span class="default"></span>
		<div class="description">
			Configuration object for the axis labels, usually displaying the number
			for each tick.
		</div>
	</div>
	<div class="member">
		<span class="name">lineColor</span>

		<span class="type">Color</span>
		<span class="default">"#C0D0E0"</span>
		<div class="description">
			The color of the line marking the axis itself.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/linecolor/">A red line on X axis</a>
		</div>

	</div>
	<div class="member">
		<span class="name">lineWidth</span>
		<span class="type">Number</span>
		<span class="default">1</span>
		<div class="description">
			The width of the line marking the axis itself.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/linewidth/">A 2px line on X axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">linkedTo</span>
		<span class="type">Number</span>

		<span class="default">null</span>
		<div class="description">
			Index of another axis that this axis is linked to. When an axis is linked to
			a master axis, it will take the same extremes as the master, but as assigned by
			min or max or by setExtremes. It can be used to show additional info, or to ease
			reading the chart by duplicating the scales.
		</div>
	</div>
	<div class="member">
		<span class="name">max</span>
		<span class="type">Number</span>

		<span class="default">null</span>
		<div class="description">
			The maximum value of the axis. If <code>null</code>, the max value is
			automatically calculated. If the <code>endOnTick</code> option is
			true, the <code>max</code> value might be rounded up.
			The actual maximum value is also influenced by 
			<a class="internal" href="#chart">chart.alignTicks</a>.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/min-max/">Fixed min and max</a>
		</div>
	</div>
	<div class="member">
		<span class="name">maxPadding</span>
		<span class="type">Number</span>

		<span class="default">0</span>
		<div class="description">
			Padding of the max value relative to the length of the axis. A padding of 0.05 will make
			a 100px axis 5px longer. This is useful when you don't want the highest data
			value to appear on the edge of the plot area. When the axis' <code>max</code>
			option is set or a max extreme is set using <code>axis.setExtremes()</code>,
			the maxPadding will be ignored. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minpadding-maxpadding/">Greater min- and maxPadding</a>

		</div>
	</div>
	<div class="member deprecated">
		<span class="name">maxZoom</span>
		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">
			Deprecated. Use <code>minRange</code> instead.
		</div>

	</div>
	<div class="member">
		<span class="name">min</span>
		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			The minimum value of the axis. If <code>null</code> the min value is
			automatically calculated. If the <code>startOnTick</code> option is
			true, the <code>min</code> value might be rounded down.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/min-max/">Fixed min and max</a>
		</div>
	</div>
	<div class="member">
		<span class="name">minorGridLineColor</span>
		<span class="type">Color</span>

		<span class="default">#E0E0E0</span>
		<div class="description">
			Color of the minor, secondary grid lines.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minorgridlinecolor/">Bright grey lines from Y axis</a>
		</div>
	</div>

	<div class="member">
		<span class="name">minorGridLineDashStyle</span>
		<span class="type">String</span>
		<span class="default">Solid</span>
		<div class="description">
			The dash or dot style of the minor grid lines. For possible values, see <a href="http://jsfiddle.net/cSrgA/">
			this demonstration</a>.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minorgridlinedashstyle/">Long dashes on minor grid lines</a>
		</div>
	</div>
	<div class="member">
		<span class="name">minorGridLineWidth</span>
		<span class="type">Number</span>

		<span class="default">1</span>
		<div class="description">
			Width of the minor, secondary grid lines.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minorgridlinewidth/">2px lines from Y axis </a>
		</div>
	</div>

	<div class="member">
		<span class="name">minorTickColor</span>
		<span class="type">Color</span>
		<span class="default">#A0A0A0</span>
		<div class="description">
			Color for the minor tick marks.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minorticks/">Black tick marks on Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">minorTickInterval</span>
		<span class="type">Number</span>
		<span class="default">null</span>

		<div class="description">
			Tick interval in scale units for the minor ticks. If <code>"auto"</code>, 
			the minor tick interval is calculated as a fifth of the tickInterval. If
			<code>null</code>, minor ticks are not shown.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/base">Null by default</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minortickinterval-auto/">"auto"</a>
		</div>

	</div>
	<div class="member">
		<span class="name">minorTickLength</span>
		<span class="type">Number</span>
		<span class="default">2</span>
		<div class="description">
			The pixel length of the minor tick marks.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minorticks/">10px on Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">minorTickPosition</span>
		<span class="type">String</span>

		<span class="default">outside</span>
		<div class="description">
			The position of the minor tick marks relative to the axis line. Can be
			one of <code>inside</code> and <code>outside</code>.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minorticks/">Inside</a>

		</div>
	</div>
	<div class="member">
		<span class="name">minorTickWidth</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">

			The pixel width of the minor tick mark.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minorticks/">1px width</a>
		</div>
	</div>
	<div class="member">
		<span class="name">minPadding</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			Padding of the min value relative to the length of the axis. A padding of 0.05 will make
			a 100px axis 5px longer. This is useful when you don't want the lowest data
			value to appear on the edge of the plot area. When the axis' <code>min</code>
			option is set or a min extreme is set using <code>axis.setExtremes()</code>,
			the minPadding will be ignored.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minpadding-maxpadding/">Greater min- and maxPadding</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">minRange</span>
		<span class="type">Number</span>

		<span class="default"></span>
		<div class="description">
			<p>The minimum range to display. The entire axis will not be allowed
			to span over a smaller interval than this. For example, for a datetime axis
			the main unit is milliseconds. If minRange is set to 3600000, you can't zoom
			in more than to one hour.</p>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minrange/">Max zoom of 6 months overrides user selections</a>
		</div>
	</div>

	<div class="member">
		<span class="name">offset</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The distance in pixels from the plot area to the axis line. A positive offset
			moves the axis with it's line, labels and ticks away from the plot area. This
			is typically used when two or more axes are displayed on the same side of the
			plot.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/offset/">Y axis offset by 70 px</a>
		</div>
	</div>
	<div class="member">
		<span class="name">opposite</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>

		<div class="description">
			Whether to display the axis on the opposite side of the normal. The normal
			is on the left side for vertical axes and bottom for horizontal, so the opposite
			sides will be right and top respectively. This is typically used with dual or
			multiple axes.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/opposite/">Linked Y axis on opposite side</a>
		</div>
	</div>
	<div class="member">
		<span class="name">ordinal</span>

		<span class="type">Boolean</span>
		<span class="default">true</span>
		<span class="since">1.1</span>
		<div class="description">
			In an ordinal axis, the points are equally spaced in the chart regardless of the actual time
			or x distance between them. This means that missing data for nights or weekends will not take 
			up space in the chart.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ordinal-true/">True by default</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ordinal-false/">false</a>

		</div>
	</div>
	<div class="member">
		<span class="name">plotBands</span>
		<span class="type">Array.&lt;plotBand&gt;</span>
		<span class="default">null</span>
		<div class="description">

			An array of configuration objects for plot bands colouring parts of the 
			plot area background.
		</div>
	</div>
	<div class="member">
		<span class="name">plotLines</span>
		<span class="type">Array.&lt;plotLine&gt;</span>
		<span class="default">null</span>

		<div class="description">
			An array of configuration objects for plot lines marking specific values in 
			the plot area.
		</div>
	</div>
	<div class="member">
		<span class="name">range</span>
		<span class="type">Number</span>
		<span class="default">undefined</span>

		<div class="description">
			The zoomed range to display when only defining one or none of <code>min</code> or <code>max</code>. 
			For example, to show the latest month, a range
			of one month can be set. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/range/">Setting a zoomed range when the rangeSelector 
				is disabled</a>
		</div>

	</div>
	<div class="member">
		<span class="name">reversed</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			Whether to reverse the axis so that the highest number is closest to origo
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/reversed/">Reversed Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">showEmpty</span>
		<span class="type">Boolean</span>

		<span class="default">true</span>
		<span class="since">1.1</span>
		<div class="description">
			Whether to show the axis line and title when the axis has no data.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/TnTsr/">When clicking the legend to hide series, one axis preserves line and title, the other doesn't</a>
		</div>

	</div>
	<div class="member">
		<span class="name">showFirstLabel</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Whether to show the first tick label.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/showfirstlabel/">Labels below plot lines on Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">showLastLabel</span>
		<span class="type">Boolean</span>

		<span class="default">true</span>
		<div class="description">
			Whether to show the last tick label.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/showfirstlabel/">Labels below plot lines on Y axis</a>
		</div>
	</div>

	<div class="member">
		<span class="name">startOfWeek</span>
		<span class="type">Number</span>
		<span class="default">1</span>
		<div class="description">
			For datetime axes, this decides where to put the tick between
			weeks. 0 = Sunday, 1 = Monday.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/startofweek-1">Monday by default</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/startofweek-0">Sunday</a> 
		</div>
	</div>
	<div class="member">
		<span class="name">startOnTick</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>

		<div class="description">
			Whether to force the axis to start on a tick. Use this option with the <code>maxPadding</code>
			option to control the axis start.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/endontick/">False for Y axis</a>
		</div>
	</div>

	<div class="member">
		<span class="name">tickColor</span>
		<span class="type">Color</span>
		<span class="default">#C0D0E0</span>
		<div class="description">
			Color for the main tick marks.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ticks/">Formatted ticks on X axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">tickInterval</span>
		<span class="type">Mixed</span>
		<span class="default">null</span>

		<div class="description">
			The interval of the tick marks in axis units. When <code>null</code>, the tick interval
			is computed to approximately follow the tickPixelInterval on linear and datetime axes.
			On categorized axes, a <code>null</code> tickInterval will default to 1, one category. 
			Note that datetime axes are based on milliseconds, so for 
			example an interval of one day is expressed as <code>24 * 3600 * 1000</code>.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/tickinterval/">Tick interval of 0.01 on Y axis</a>  
		</div>

	</div>
	<div class="member">
		<span class="name">tickLength</span>
		<span class="type">Number</span>
		<span class="default">5</span>
		<div class="description">
			The pixel length of the main tick marks.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ticks/">Formatted ticks on X axis</a>  
		</div>
	</div>
	<!-- div class="member">
		<span class="name">tickmarkPlacement</span>
		<span class="type">String</span>
		<span class="default">"between"</span>
		<div class="description">
			For categorized axes only. If "on" the tick mark is placed in the center of 
			the category, if "between" the tick mark is placed between categories.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/xsbWC/2/">"between" by default</a>, 
			<a href="http://jsfiddle.net/xsbWC/3/">"on"</a>  
		</div>
	</div -->
	<div class="member">
		<span class="name">tickPixelInterval</span>
		<span class="type">Number</span>

		<span class="default"></span>
		<div class="description">
			If tickInterval is <code>null</code> this option sets the approximate pixel interval of the
			tick marks. Not applicable to categorized axis. Defaults to <code>72</code> 
			for the Y axis and <code>100</code> for	the X axis. 
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/tickpixelinterval/">200 px on X axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">tickPosition</span>
		<span class="type">String</span>
		<span class="default">"outside"</span>

		<div class="description">
			The position of the major tick marks relative to the axis line. Can be
			one of <code>inside</code> and <code>outside</code>.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ticks/">Formatted ticks on X axis</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">tickPositions</span>
		<span class="type">Array</span>
		<span class="default">undefined</span>
		<span class="since">1.1</span>
		<div class="description">

			A collection of hard coded tick value positions. This overrides the auto computed positions
			based on tickInterval and tickPixelInterval. See also <code>tickPositioner</code>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/9jbp9/">Custom tick positions on Y axis</a>
		</div>
	</div>
	<div class="member">

		<span class="name">tickPositioner</span>
		<span class="type">Function</span>
		<span class="default">Array</span>
		<span class="since">1.1</span>
		<div class="description">
			A callback function to compute on what values the ticks should be placed. Returns an array
			of numbers. The <code>min</code> and <code>max</code> of the axis are passed in as the first
			and second parameter. Options like <code>tickInterval</code> can be accessed by 
			<code>this.options.tickInterval</code>. Note that in stock charts, the last label is hidden by 
			default by the <code>showLastLabel</code> option.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/3USht/">Show ticks on Y axis at binary positions</a>
		</div>
	</div>
	<div class="member">
		<span class="name">tickWidth</span>
		<span class="type">Number</span>

		<span class="default">1</span>
		<div class="description">
			The pixel width of the major tick marks.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ticks/">Formatted ticks on X axis</a>
		</div>
	</div>

	<div class="member">
		<span class="name">title</span>
		<span class="type">xAxis.title</span>
		<span class="default">null</span>
		<div class="description">
			Configuration object for the axis title.
		</div>
	</div>

	
	<!-- div class="member">
		<span class="name">units</span>
		<span class="type">Array</span>
		<span class="default"></span>
		<span class="since">1.1</span>
		<div class="description">
			In a datetime axis, the units are a collection of allowed datetime units and their multiples.
			For example, <code>[['day', [1,2,7]]]</code> defines that the xAxis is allowed to 
			place ticks on every first, second or seventh day - but not on smaller or greater intervals.
			A common use case is to not allow less than for example one day in the x axis. 
		</div>
	</div -->
</div>

<div class="section">
	<h2>xAxis.events</h2>
	<div class="section-description">
	Event handlers for the axis.
	</div>
	<div class="member">
		<span class="name">setExtremes</span>

		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the minimum and maximum is set for the axis, either by calling the
			<code>.setExtremes()</code> method or by selecting an area in the chart. The <code>this</code> 
			keyword refers to the axis object itself. One parameter, <code>event</code>, is passed to the function. 
			This contains common event information based on jQuery or MooTools depending on which 
			library is used as the base for Highcharts. The new user set minimum and maximum values
			can be found by <code>event.min</code> and <code>event.max</code>. 
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/events-setextremes/">Log new extremes on x axis</a>
		</div>
	</div>
</div>


<div class="section">
	<h2>xAxis.labels</h2>
	<div class="section-description">

	The axis labels show the number or category for each tick.
	</div>
	<div class="member">
		<span class="name">align</span>
		<span class="type">String</span>
		<span class="default">"center"</span>
		<div class="description">
			What part of the string the given position is anchored to. 
			Can be one of <code>"left"</code>,
			<code>"center"</code> or <code>"right"</code>.
		</div>

	</div>
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Enable or disable the axis labels. 
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/labels-enabled/">X axis labels disabled</a>
		</div>
	</div>
	<div class="member">
		<span class="name">formatter</span>
		<span class="type">Function</span>

		<span class="default"></span>
		<div class="description">
			Callback JavaScript function to format the label. The value is 
			given by <code>this.value</code>. Defaults to: 
<pre>function() {
	return this.value;
}</pre>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/labels-formatter/">Added units on Y axis</a>

		</div>
	</div>
	<div class="member">
		<span class="name">rotation</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">

			Rotation of the labels in degrees. 
		</div>
	</div>
	<div class="member">
		<span class="name">staggerLines</span>
		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">

			Horizontal axes only. The number of lines to spread the labels over to make room
			or tighter labels.  
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/labels-staggerlines/">Show labels over two lines</a>
		</div>
	</div>
	<div class="member">
		<span class="name">step</span>

		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			To show only every <em>n</em>'th label on the axis, set the step to <em>n</em>. Setting the step to 2 shows every other label. 
		</div>
	</div>

	<div class="member">
		<span class="name">style</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the label. Defaults to:
<pre>style: {
	color: '#6D869F',
	fontWeight: 'bold'
}
</pre>
		</div>

	</div>
	<div class="member">
		<span class="name">x</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The x position offset of the label relative to the tick position
			on the axis.
		</div>

	</div>
	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The y position offset of the label relative to the tick position
			on the axis.
		</div>

	</div>
</div>
<div class="section">
	<h2>xAxis.plotBands</h2>
	<div class="section-description">
	A colored band stretching across the plot area marking an interval on the axis.
	</div>
	<div class="member">
		<span class="name">color</span>

		<span class="type">Color</span>
		<span class="default">null</span>
		<div class="description">
			The color of the plot band.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotbands/">Plot band on Y axis</a>
		</div>

	</div>
	<div class="member">
		<span class="name">events</span>
		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			An object defining mouse events for the plot band. Supported properties are <code>click</code>,
			<code>mouseover</code>, <code>mouseout</code>, <code>mousemove</code>. 
		</div>

	</div>
	<div class="member">
		<span class="name">from</span>
		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			The start position of the plot band in axis units.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotbands/">Plot band on Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">id</span>
		<span class="type">String</span>

		<span class="default">null</span>
		<div class="description">
			An id used for identifying the plot band in Axis.removePlotBand.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fdTEx/7">Remove plot band by id</a>
		</div>
	</div>

	<div class="member">
		<span class="name">label</span>
		<span class="type">xAxis.plotBands.label</span>
		<span class="default"></span>
		<div class="description">
			Text labels for the plot bands.
		</div>
	</div>

	<div class="member">
		<span class="name">to</span>
		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			The end position of the plot band in axis units.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotbands/">Plot band on Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">zIndex</span>
		<span class="type">Number</span>
		<span class="default">null</span>

		<div class="description">
			The z index of the plot band within the chart. Values from 0 to 20 make sense.
		</div>
	</div>
</div>

<div class="section">
	<h2>xAxis.plotBands.label</h2>
	<div class="section-description">
	Text labels for the plot bands
	</div>

	<div class="member">
		<span class="name">align</span>
		<span class="type">String</span>
		<span class="default">"center"</span>
		<div class="description">
			Horizontal alignment of the label. Can be one of "left", "center" or "right".
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotbands-label/">Plot band with labels</a>
		</div>
	</div>
	<div class="member">
		<span class="name">verticalAlign</span>
		<span class="type">String</span>
		<span class="default">"top"</span>

		<div class="description">
			Vertical alignment of the label relative to the plot band. Can be one of "top", "middle" or "bottom".
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotbands-label/">Plot band with labels</a>
		</div>
	</div>
	<div class="member">
		<span class="name">rotation</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			Rotation of the text label in degrees 
		</div>
	</div>
	<div class="member">
		<span class="name">style</span>

		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the text label. 
		</div>
	</div>
	<div class="member">
		<span class="name">textAlign</span>

		<span class="type">String</span>
		<span class="default"></span>
		<div class="description">
			The text alignment for the label. While <code>align</code> determines
			where the texts anchor point is placed within the plot band, <code>textAlign</code> determines
			how the text is aligned against its anchor point. Possible values are
			"left", "center" and "right". Defaults to the same as
			the <code>align</code> option.  
		</div>

	</div>
	<div class="member">
		<span class="name">x</span>
		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">
			Horizontal position relative the alignment. Default varies by orientation. 
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotbands-label/">Plot band with labels</a>
		</div>
	</div>
	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>

		<span class="default"></span>
		<div class="description">
			Vertical position of the text baseline relative to the alignment. Default varies by orientation. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotbands-label/">Plot band with labels</a>
		</div>
	</div>
</div>


<div class="section">
	<h2>xAxis.plotLines</h2>
	<div class="section-description">
	A line streching across the plot area, marking a specific value on one of the axes. 
	</div>
	<div class="member">
		<span class="name">color</span>
		<span class="type">Color</span>

		<span class="default">null</span>
		<div class="description">
			The color of the line.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotlines/">Plot line on Y axis</a>
		</div>
	</div>

	<div class="member">
		<span class="name">dashStyle</span>
		<span class="type">String</span>
		<span class="default">Solid</span>
		<div class="description">
			The dashing or dot style for the plot line. For possible values see <a href="http://jsfiddle.net/cSrgA/">
			this overview</a>.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotlines/">Plot line on Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">events</span>
		<span class="type">Object</span>

		<span class="default"></span>
		<div class="description">
			An object defining mouse events for the plot line. Supported properties are <code>click</code>,
			<code>mouseover</code>, <code>mouseout</code>, <code>mousemove</code>. 
		</div>
	</div>

	<div class="member">
		<span class="name">id</span>
		<span class="type">String</span>
		<span class="default">null</span>
		<div class="description">
			An id used for identifying the plot line in Axis.removePlotLine.
		</div>
	</div>

	<div class="member">
		<span class="name">label</span>
		<span class="type">xAxis.plotLines.label</span>
		<span class="default"></span>
		<div class="description">
			Text labels for the plot lines.
		</div>
	</div>

	<div class="member">
		<span class="name">value</span>
		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			The position of the line in axis units.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotlines/">Plot line on Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">width</span>
		<span class="type">Number</span>
		<span class="default">null</span>

		<div class="description">
			The width or thickness of the plot line.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotlines/">Plot line on Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">zIndex</span>

		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			The z index of the plot line within the chart.
		</div>
	</div>
</div>

<div class="section">
	<h2>xAxis.plotLines.label</h2>

	<div class="section-description">
	Text labels for the plot bands
	</div>
	<div class="member">
		<span class="name">align</span>
		<span class="type">String</span>
		<span class="default">"center"</span>
		<div class="description">

			Horizontal alignment of the label. Can be one of "left", "center" or "right".
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotlines/">Plot line on Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">verticalAlign</span>

		<span class="type">String</span>
		<span class="default">"top"</span>
		<div class="description">
			Vertical alignment of the label relative to the plot line. Can be one of "top", "middle" or "bottom".
		</div>
	</div>
	<div class="member">
		<span class="name">rotation</span>

		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">
			Rotation of the text label in degrees. Defaults to 0 for horizontal plot lines and 90 for vertical lines. 
		</div>
	</div>
	<div class="member">
		<span class="name">style</span>

		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the text label. 
		</div>
	</div>
	<div class="member">
		<span class="name">textAlign</span>

		<span class="type">String</span>
		<span class="default"></span>
		<div class="description">
			The text alignment for the label. While <code>align</code> determines
			where the texts anchor point is placed within the plot band, <code>textAlign</code> determines
			how the text is aligned against its anchor point. Possible values are
			"left", "center" and "right". Defaults to the same as
			the <code>align</code> option.  
		</div>

	</div>
	<div class="member">
		<span class="name">x</span>
		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">
			Horizontal position relative the alignment. Default varies by orientation. 
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotlines/">Plot line on Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>

		<span class="default"></span>
		<div class="description">
			Vertical position of the text baseline relative to the alignment. Default varies by orientation. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/plotlines/">Plot line on Y axis</a>
		</div>
	</div>
</div>



<div class="section">
	<h2>xAxis.title</h2>
	<div class="section-description">
	The axis title, showing next to the axis line.
	</div>
	<div class="member">
		<span class="name">align</span>

		<span class="type">String</span>
		<span class="default">"middle"</span>
		<div class="description">
			Alignment of the title relative to the axis values. Possible values
			are "low", "middle" or "high".
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/title-align/">Aligned to "high" value</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">margin</span>
		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">
			The pixel distance between the axis labels or line and the title. Defaults to 0 for
			horizontal axes, 10 for vertical
		</div>

	</div>
	
	<div class="member">
		<span class="name">offset</span>
		<span class="type">Number</span>
		<span class="default">undefined</span>
		<span class="since">1.1</span>
		<div class="description">

			The distance of the axis title from the axis line. By default, this distance is 
			computed from the offset width of the labels, the labels' distance from 
			the axis and the title's margin. However when the offset option is set, it
			overrides all this.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/v5CkW/">Place the axis title on top of the Y axis</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">rotation</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The rotation of the text in degrees. 0 is horizontal, 270 is vertical
			reading from bottom to top.
		</div>
	</div>
	<div class="member">
		<span class="name">style</span>

		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the title. When titles are rotated they are rendered using
			vector graphic techniques and not all styles are applicable. Most noteworthy, 
			a bug in IE8 renders all rotated strings bold and italic. Defaults to: 
<pre>style: {
	color: '#6D869F',
	fontWeight: 'bold'
}</pre>
		</div>
	</div>
	<div class="member">

		<span class="name">text</span>
		<span class="type">String</span>
		<span class="default">null</span>
		<div class="description">
			The actual text of the axis title. It can contain basic HTML text markup like
			&lt;b&gt;, &lt;i&gt; and spans with style.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/title-text/">Titles for both axes</a>
		</div>
	</div>
</div>
<div class="section">
	<h2>yAxis</h2>
	<h4 class="extends">Extends xAxis</h4>

	<div class="section-description">
	<p>The Y axis or value axis. In case of multiple axes, the yAxis
	node is an array of configuration objects.</p>
	<p>See <a class="internal" href="#axis-object">the Axis object</a> for programmatic
	access to the axis.</p>
	</div>
	<div class="member">
		<span class="name">endOnTick</span>

		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Whether to force the axis to end on a tick. Use this option with the <code>maxPadding</code>
			option to control the axis end. 
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/base">True by default</a> and
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/endontick/">false</a> for Y axis
		</div>
	</div>
	<div class="member">
		<span class="name">gridLineWidth</span>
		<span class="type">Number</span>

		<span class="default">1</span>
		<div class="description">
			The width of the grid lines extending the ticks across the plot area.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/gridlinewidth/">2px lines</a>
		</div>
	</div>

	<div class="member">
		<span class="name">lineWidth</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The width of the line marking the axis itself.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/linewidth/">A 2px line on X axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">maxPadding</span>
		<span class="type">Number</span>
		<span class="default">0.05</span>

		<div class="description">
			Padding of the max value relative to the length of the axis. A padding of 0.05 will make
			a 100px axis 5px longer. This is useful when you don't want the highest data
			value to appear on the edge of the plot area. When the axis' <code>max</code>
			option is set or a max extreme is set using <code>axis.setExtremes()</code>,
			the maxPadding will be ignored. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minpadding-maxpadding/">Greater min- and maxPadding</a>
		</div>

	</div>
	<div class="member">
		<span class="name">minPadding</span>
		<span class="type">Number</span>
		<span class="default">0.05</span>
		<div class="description">
			Padding of the min value relative to the length of the axis. A padding of 0.05 will make
			a 100px axis 5px longer. This is useful when you don't want the lowest data
			value to appear on the edge of the plot area. When the axis' <code>min</code>

			option is set or a min extreme is set using <code>axis.setExtremes()</code>,
			the minPadding will be ignored.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/minpadding-maxpadding/">Greater min- and maxPadding</a>
		</div>
	</div>
	<div class="member">
		<span class="name">showLastLabel</span>

		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			Whether to show the last tick label.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/showfirstlabel/">Labels below plot lines on Y axis</a>
		</div>

	</div>
	<div class="member">
		<span class="name">startOnTick</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Whether to force the axis to start on a tick. Use this option with the <code>maxPadding</code>

			option to control the axis start.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/endontick/">False for Y axis</a>
		</div>
	</div>
	<div class="member">
		<span class="name">tickWidth</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The pixel width of the major tick marks.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ticks/">Formatted ticks on X axis</a>
		</div>

	</div>
	
</div>

<div class="section">
	<h2>yAxis.events</h2>
	<h4 class="extends">Extends xAxis.events</h4>
</div>

<div class="section">
	<h2>yAxis.labels</h2>

	<h4 class="extends">Extends xAxis.labels</h4>
	<div class="member">
		<span class="name">align</span>
		<span class="type">String</span>
		<span class="default">"left"</span>
		<div class="description">
			What part of the string the given position is anchored to. 
			Can be one of <code>"left"</code>,
			<code>"center"</code> or <code>"right"</code>.
		</div>

	</div>
	<div class="member">
		<span class="name">x</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The x position offset of the label relative to the tick position
			on the axis.
		</div>

	</div>
	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>
		<span class="default">-2</span>
		<div class="description">
			The y position offset of the label relative to the tick position
			on the axis.
		</div>

	</div>
</div>

<div class="section">
	<h2>yAxis.title</h2>
	<h4 class="extends">Extends xAxis.title</h4>
	<div class="member">
		<span class="name">margin</span>
		<span class="type">Number</span>

		<span class="default">40</span>
		<div class="description">
			The pixel distance between the axis labels or line and the title. Defaults to 0 for
			horizontal axes, 10 for vertical
		</div>
	</div>
	<div class="member">
		<span class="name">rotation</span>
		<span class="type">Number</span>

		<span class="default">270</span>
		<div class="description">
			The rotation of the text in degrees. 0 is horizontal, 270 is vertical
			reading from bottom to top.
		</div>
	</div>
</div>

<div class="section">
	<h2>yAxis.plotBands</h2>
	<h4 class="extends">Extends xAxis.plotBands</h4>

</div>

<div class="section">
	<h2>plotOptions</h2>
	<div class="section-description">
		<p>The plotOptions is a wrapper object for config objects for each series type.
		The config objects for each series can also be overridden for each series 
		item as given in the series array.</p>
		<p>Configuration options for the series are given in three levels. Options
		for all series in a chart are given in the <a class="internal"
		href="#plotOptions.series">plotOptions.series</a> object. Then options for all series
		of a specific type are given in the plotOptions of that type, for example plotOptions.line.
		Next, options for one single series are given in <a class="internal" href="#series">the 
		series array</a>.</p>

	</div>
	
	<div class="member">
		<span class="name">area</span>
		<span class="type">plotOptions.area</span>
		<span class="default"></span>
		<div class="description">
			Area plot options
		</div>

	</div>
	<div class="member">
		<span class="name">areaspline</span>
		<span class="type">plotOptions.areaspline</span>
		<span class="default"></span>
		<div class="description">
			Areaspline plot options
		</div>

	</div>
	<div class="member">
		<span class="name">column</span>
		<span class="type">plotOptions.column</span>
		<span class="default"></span>
		<div class="description">
			Column chart options
		</div>

	</div>
	<div class="member">
		<span class="name">line</span>
		<span class="type">plotOptions.line</span>
		<span class="default"></span>
		<div class="description">
			Line chart options
		</div>

	</div>
	<div class="member">
		<span class="name">series</span>
		<span class="type">plotOptions.series</span>
		<span class="default"></span>
		<div class="description">
			General options for all series regardless of type.
		</div>

	</div>
	<div class="member">
		<span class="name">scatter</span>
		<span class="type">plotOptions.scatter</span>
		<span class="default"></span>
		<div class="description">
			Scatter chart options
		</div>

	</div>
	<div class="member">
		<span class="name">spline</span>
		<span class="type">plotOptions.spline</span>
		<span class="default"></span>
		<div class="description">
			Spline chart options
		</div>

	</div>
</div>

<!-- General series plot options -->
<div class="section">
	<h2>plotOptions.series</h2>
	<div class="section-description">
		<p>General options for all series types.</p>
		
	</div>
	<div class="member">

		<span class="name">allowPointSelect</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			Allow this series' points to be selected by clicking on the markers or bars.
		</div>
	</div>
	<div class="member">

		<span class="name">animation</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Enable or disable the initial animation when a series is displayed. The animation
			can also be set as a configuration object. Please note that this option only applies to the initial
			animation of the series itself. For other animations, see <a href="#chart" class="internal">
			#chart</a> => animation and the animation parameter under the API methods.
			The following properties are supported: 
			<dl>

				<dt>duration</dt>
				<dd>The duration of the animation in milliseconds.</dd>
				
				<dt>easing</dt>
				<dd>When using jQuery as the general framework, the easing can be set to <code>linear</code> or
				<code>swing</code>. More easing functions are available with the use of jQuery plug-ins, most notably
				the jQuery UI suite. See <a href="http://api.jquery.com/animate/">the jQuery docs</a>. When using 
				MooToos as the general framework, use the property name <code>transition</code> instead of <code>easing</code>.</dd>

			</dl>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/animation-slower/">Slower animation</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/animation-easing/">easing "swing" through jQuery UI</a>.
			
		</div>
	</div>
	<div class="member">
		<span class="name">color</span>

		<span class="type">String</span>
		<span class="default"></span>
		<div class="description">
			The main color of the series. In line type series it applies to the line and the point
			markers unless otherwise specified. In bar type series it applies to the bars
			unless a color is specified per point. The default value is pulled from the 
			<code>options.colors</code> array.
		</div>
	</div>
	<div class="member">

		<span class="name">compare</span>
		<span class="type">String</span>
		<span class="default">undefined</span>
		<span class="since">1.0.1</span>
		<div class="description">
			Compare the values of the series against the first value in the visible range. The y axis will
			show percentage or absolute change depending on whether <code>compare</code> is set to <code>"percent"</code>

			or <code>"value"</code>. When this is applied to multiple series, it allows comparing the development
			of the series against eachother.
		</div>
		
		<div class="demo">
			Setting compare to 
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/series-compare-percent/">
				percent</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/series-compare-value/">
				value</a>. 
		</div>

	</div>
	<div class="member">
		<span class="name">connectNulls</span>
		<span class="type">Boolean</span>
		<span class="default"></span>
		<div class="description">
			Whether to draw a line between points on either side of a null point, or render a gap between them. 
		</div>

	</div>
	<div class="member">
		<span class="name">cropThreshold</span>
		<span class="type">Number</span>
		<span class="default">300</span>
		<div class="description">
			When the series contains less points than the crop threshold, all points are drawn, 
			event if the points fall outside the visible plot area at the current zoom. The advantage
			of drawing all points (including markers and columns), is that animation is performed on
			updates. On the other hand, when the series contains more points than the crop threshold,
			the series data is cropped to only contain points that fall within the plot area. The advantage
			of cropping away invisible points is to increase performance on large series.  
		</div>

	</div>
	<div class="member">
		<span class="name">cursor</span>
		<span class="type">String</span>
		<span class="default">''</span>
		<div class="description">
			You can set the cursor to "pointer" if you have click events attached to 
			the series, to signal to the user that the points and lines can be clicked.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/cursor/">Pointer on a line graph</a>
		</div>
	</div>
	<div class="member">
		<span class="name">dashStyle</span>
		<span class="type">String</span>

		<span class="default">null</span>
		<div class="description">
			A name for the dash style to use for the graph. Applies only to series type having a graph,
			like <code>line</code>, <code>spline</code>, <code>area</code> and <code>scatter</code> in 
			case it has a <code>lineWidth</code>. The value for the <code>dashStyle</code> include:
		    <ul>

		    	<li>Solid</li>
		    	<li>ShortDash</li>
		    	<li>ShortDot</li>
		    	<li>ShortDashDot</li>
		    	<li>ShortDashDotDot</li>
		    	<li>Dot</li>

		    	<li>Dash</li>
		    	<li>LongDash</li>
		    	<li>DashDot</li>
		    	<li>LongDashDot</li>
		    	<li>LongDashDotDot</li>
		    </ul>

		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/cSrgA/">Possible values demonstrated</a>
		</div>
	</div>
	<div class="member">
		<span class="name">dataGrouping</span>
		<span class="type">plotOptions.series.dataGrouping</span>

		<span class="default"></span>
		<div class="description">
			Options for data grouping in long series
		</div>
	</div>
	<div class="member">
		<span class="name">dataLabels</span>
		<span class="type">plotOptions.series.dataLabels</span>

		<span class="default"></span>
		<div class="description">
			Defines the appearance of the data labels, static labels for each point.
		</div>
	</div>
	<div class="member">
		<span class="name">enableMouseTracking</span>
		<span class="type">Boolean</span>

		<span class="default">true</span>
		<div class="description">
			Enable or disable the mouse tracking for a specific series. This includes
			point tooltips and click events on graphs and points. When using shared tooltips 
			(default in stock charts), mouse tracking is not required. For large datasets
			it improves performance.
		</div>
	</div>
	<div class="member">
		<span class="name">events</span>
		<span class="type">plotOptions.series.events</span>

		<span class="default"></span>
		<div class="description">
			Event listeners for the series.
		</div>
	</div>
	<div class="member">
		<span class="name">gapSize</span>
		<span class="type">Number</span>

		<span class="default">0</span>
		<span class="default">1.1</span>
		<div class="description">
			<p>Defines when to display a gap in the graph. A gap size of 5 means that if the distance
			between two points is greater than five times that of the two closest points, the 
			graph will be broken.</p>
			<p>In practice, this option is most often used to visualize gaps in time series. In
				a stock chart, intraday data is available for daytime hours, while gaps will appear
				in nights and weekends.</p>
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/series-gapsize/">
				Setting the gap size to 2 introduces gaps for weekends in daily datasets.</a>
		</div>
	</div>
	<div class="member">
		<span class="name">id</span>
		<span class="type">String</span>

		<span class="default">null</span>
		<div class="description">
			An id for the series. This can be used after render time to get a pointer
			to the series object through <code>chart.get()</code>.
		</div>
	</div>
	<div class="member">
		<span class="name">legendIndex</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The sequential index of the series within the legend.
		</div>
	</div>
	<div class="member">
		<span class="name">lineWidth</span>

		<span class="type">Number</span>
		<span class="default">2</span>
		<div class="description">
			Pixel with of the graph line.
		</div>
	</div>
	<div class="member">
		<span class="name">marker</span>

		<span class="type">plotOptions.series.marker</span>
		<span class="default"></span>
		<div class="description">
			Defines the appearance of the point markers.
		</div>
	</div>
	<div class="member">
		<span class="name">point</span>

		<span class="type">plotOptions.series.point</span>
		<span class="default"></span>
		<div class="description">
		</div>
	</div>
	<div class="member">
		<span class="name">pointStart</span>
		<span class="type">Number</span>

		<span class="default">0</span>
		<div class="description">
			If no x values are given for the points in a series, pointStart defines
			on what value to start. On a datetime X axis, the number will be given
			as milliseconds since 1970-01-01, for example <code>Date.UTC(2011, 0, 1)</code>.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/pointinterval-pointstart/">
				Using pointStart and pointInterval</a>

		</div>
	</div>
	<div class="member">
		<span class="name">pointInterval</span>
		<span class="type">Number</span>
		<span class="default">1</span>
		<div class="description">

			<p>If no x values are given for the points in a series, pointInterval defines
			the interval of the x values. For example, if a series contains one value
			each day, set pointInterval to <code>24 * 3600 * 1000</code>.</p>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/pointinterval-pointstart/">
				Using pointStart and pointInterval</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">pointRange</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The width of each point on the x axis. For example in a column chart with one value each day,
			the pointRange would be 1 day (= 24 * 3600 * 1000 milliseconds). This is normally computed
			automatically, but this option can be used to override the automatic value. 
		</div>
	</div>

	<div class="member">
		<span class="name">selected</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			Whether to select the series initially. If <code>showCheckbox</code> is true,
			the checkbox next to the series name in the legend will be checked for a selected series.
		</div>

	</div>
	<div class="member">
		<span class="name">shadow</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			Whether to apply a drop shadow to the graph line. 
		</div>

	</div>
	<div class="member">
		<span class="name">showCheckbox</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			If true, a checkbox is displayed
			next to the legend item to allow selecting the series. The state of the
			checkbox is determined by the <code>selected</code> option.
		</div>

	</div>
	<div class="member">
		<span class="name">showInLegend</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Whether to display this particular series or series type in the legend.
		</div>

	</div>
	<div class="member">
		<span class="name">stacking</span>
		<span class="type">String</span>
		<span class="default">null</span>
		<div class="description">
			Whether to stack the values of each series on top of each other. Possible values
			are null to disable, "normal" to stack by value or "percent".
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/base/">Area</a> with "normal" stacking. 
		</div>
	</div>
	<div class="member">
		<span class="name">states</span>
		<span class="type">plotOptions.series.states</span>

		<span class="default"></span>
		<div class="description">
			A wrapper object for all the series options in specific states.
		</div>
	</div>
	<div class="member">
		<span class="name">stickyTracking</span>
		<span class="type">Boolean</span>

		<span class="default">true</span>
		<div class="description">
			Sticky tracking of mouse events. When true, the <code>mouseOut</code> event
			on a series isn't triggered until the mouse moves over another series, or out
			of the plot area. When false, the <code>mouseOut</code> event on a series is
			triggered when the mouse leaves the area around the series' graph or markers.
			This also implies the tooltip when not shared. When <code>stickyTracking</code> is false, the 
			tooltip will be hidden when moving the mouse between series.
		</div>

	</div>
	<div class="member">
		<span class="name">tooltip</span>
		<span class="type">Object</span>
		<span class="default">{}</span>
		<div class="description">
			A configuration object for the tooltip rendering of each single series. Properties are inherited
			from <a class="internal">#tooltip</a>. Overridable properties are <code>headerFormat</code>, <code>pointFormat</code>,
			<code>yDecimals</code>, <code>xDateFormat</code>, <code>yPrefix</code> and <code>ySuffix</code>.	
		</div>

	</div>
	
	<div class="member">
		<span class="name">turboThreshold</span>
		<span class="type">Number</span>
		<span class="default">1000</span>
		<div class="description">
			When a series contains a data array that is longer than this, only one dimensional arrays of numbers,
			or two dimensional arrays with x and y values are allowed. Also, only the first
			point is tested, and the rest are assumed to be the same format. This saves expensive
			data checking and indexing in long series.
		</div>

	</div>
	
	<div class="member">
		<span class="name">visible</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Set the initial visibility of the series.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/series-visibility/">Hidden series</a>
		</div>
	</div>
	<div class="member">
		<span class="name">zIndex</span>
		<span class="type">Number</span>

		<span class="default">null</span>
		<div class="description">
			Define the z index of the series.
		</div>
	</div>
</div>

<div class="section">
	<h2>plotOptions.series.marker</h2>
	<div class="member">

		<span class="name">enabled</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			Enable or disable the point markers.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/series-marker/">Enabled markers</a>

		</div>
	</div>
	<div class="member">
		<span class="name">fillColor</span>
		<span class="type">Color</span>
		<span class="default">null</span>
		<div class="description">

			The fill color of the point marker. When <code>null</code>, the series' or point's color
			is used.
		</div>
	</div>
	<div class="member">
		<span class="name">lineColor</span>
		<span class="type">Color</span>
		<span class="default">"#FFFFFF"</span>

		<div class="description">
			The color of the point marker's outline. When <code>null</code>, the series' or point's color
			is used.
		</div>
	</div>
	<div class="member">
		<span class="name">lineWidth</span>
		<span class="type">Number</span>

		<span class="default">0</span>
		<div class="description">
			The width of the point marker's outline.
		</div>
	</div>
	<div class="member">
		<span class="name">radius</span>
		<span class="type">Number</span>

		<span class="default">0</span>
		<div class="description">
			The radius of the point marker.
		</div>
	</div>
	<div class="member">
		<span class="name">states</span>
		<span class="type">plotOptions.series.marker.states</span>

		<span class="default"></span>
		<div class="description">
			Interaction states for the point marker.
		</div>
	</div>
	<div class="member">
		<span class="name">symbol</span>
		<span class="type">String</span>

		<span class="default">null</span>
		<div class="description">
			A predefined shape or symbol for the marker. When null, the symbol is pulled from
			options.symbols. Other possible values are "circle", "square", "diamond", "triangle"
			and "triangle-down". Additionally, the URL to a graphic can be given on this form: 
			"url(graphic.png)".
		</div>
	</div>
</div>

<div class="section">
	<div class="section-description">Properties for each single point</div>
	<h2>plotOptions.series.point</h2>

	<div class="member">
		<span class="name">events</span>
		<span class="type">plotOptions.series.point.events</span>
		<span class="default"></span>
		<div class="description">
			Events for each single point
		</div>
	</div>

</div>

<div class="section">
	<div class="section-description">Events for each single point</div>
	<h2>plotOptions.series.point.events</h2>
	<div class="member">
		<span class="name">click</span>
		<span class="type">Function</span>

		<span class="default"></span>
		<div class="description">
			<p></p>Fires when a point is clicked. The <code>this</code> keyword refers to the 
			point object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts.</p>
			<p>If the <code>series.allowPointSelect</code>
			option is true, the default action for the point's click event is to toggle the
			point's select state. Returning <code>false</code> cansels this action.</p>

		</div>
	</div>
	<div class="member">
		<span class="name">mouseOver</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the mouse enters the area close to the point. The <code>this</code> keyword refers to the 
			point object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts.
		</div>

	</div>
	<div class="member">
		<span class="name">mouseOut</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the mouse leaves the area close to the point. The <code>this</code> keyword refers to the 
			point object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts.
		</div>

	</div>
	<div class="member">
		<span class="name">remove</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the point is removed using the <code>.remove()</code> method. The <code>this</code> keyword refers to the 
			point object itself. One parameter, <code>event</code>, is passed to the function.
			Returning <code>false</code> cancels the operation.
		</div>

		
	</div>
	<div class="member">
		<span class="name">select</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the point is selected either programatically or following a click
			on the point. The <code>this</code> keyword refers to the 
			point object itself. One parameter, <code>event</code>, is passed to the function.
			Returning <code>false</code> cancels the operation.
		</div>

	</div>
	<div class="member">
		<span class="name">unselect</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the point is unselected either programatically or following a click
			on the point. The <code>this</code> keyword refers to the 
			point object itself. One parameter, <code>event</code>, is passed to the function.
			Returning <code>false</code> cancels the operation.
		</div>

	</div>
	<div class="member">
		<span class="name">update</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the point is updated programmatically through the <code>.update()</code>

			method. The <code>this</code> keyword refers to the 
			point object itself. One parameter, <code>event</code>, is passed to the function. The 
			new point options can be accessed through <code>event.options</code>.
			Returning <code>false</code> cancels the operation.
		</div>
	</div>
</div>

<div class="section">
	<h2>plotOptions.series.marker.states</h2>
	<div class="member">
		<span class="name">hover</span>
		<span class="type">plotOptions.series.marker.states.hover</span>
		<span class="default"></span>
		<div class="description">Configuration options for the hovered point marker. Members are 
		inherited from the default line configuration, but single members can be overridden.
		</div>

	</div>
	<div class="member">
		<span class="name">select</span>
		<span class="type">plotOptions.series.marker.states.select</span>
		<span class="default"></span>
		<div class="description">Configuration options for the selected point marker. Members are 
		inherited from the default line configuration, but single members can be overridden.
		</div>
	</div>

</div>



<div class="section">
	<h2>plotOptions.series.marker.states.hover</h2>
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>

		<div class="description">
			Enable or disable the point marker.
		</div>
	</div>
	<div class="member">
		<span class="name">fillColor</span>
		<span class="type">Color</span>
		<span class="default">null</span>

		<div class="description">
			The fill color of the point marker. When <code>null</code>, the series' or point's color
			is used.
		</div>
	</div>
	<div class="member">
		<span class="name">lineColor</span>
		<span class="type">Color</span>

		<span class="default">"#FFFFFF"</span>
		<div class="description">
			The color of the point marker's outline. When <code>null</code>, the series' or point's color
			is used.
		</div>
	</div>
	<div class="member">
		<span class="name">lineWidth</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The width of the point marker's outline.
		</div>
	</div>
	<div class="member">
		<span class="name">radius</span>

		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">The radius of the point marker. In hover state, it defaults
		to the normal state's radius + 2.
		</div>
	</div>
</div>

<div class="section">
	<h2>plotOptions.series.marker.states.select</h2>
	<div class="section-description">

		The appearance of the point marker when selected. In order to allow a point to be 
		selected, set the <code>series.allowPointSelect</code> option to true.
	</div>
	
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>

		<div class="description">
			Enable or disable visible feedback for selection.
		</div>
	</div>
	<div class="member">
		<span class="name">fillColor</span>
		<span class="type">Color</span>
		<span class="default">null</span>

		<div class="description">
			The fill color of the point marker. When <code>null</code>, the series' or point's color
			is used.
		</div>
	</div>
	<div class="member">
		<span class="name">lineColor</span>
		<span class="type">Color</span>

		<span class="default">"#000000"</span>
		<div class="description">
			The color of the point marker's outline. When <code>null</code>, the series' or point's color
			is used.
		</div>
	</div>
	<div class="member">
		<span class="name">lineWidth</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The width of the point marker's outline.
		</div>
	</div>
	<div class="member">
		<span class="name">radius</span>

		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">The radius of the point marker. In hover state, it defaults
		to the normal state's radius + 2.
		</div>
	</div>
</div>



<div class="section">
	<h2>plotOptions.series.dataGrouping</h2>

	<div class="member">
		<span class="name">approximation</span>
		<span class="type">String</span>
		<span class="default">"average"</span>
		<div class="description">
			<p>The method of approximation inside a group. When for example
			30 days are grouped into one month, this determines what value should represent the
			group. Possible values are "average", "open", "high", "low", "close" and "sum". For
			OHLC and candlestick series the approximation is "ohlc" by default, which finds the 
			open, high, low and close values within all the grouped data.</p>
			
			<p>Custom aggregate methods
			can be added by assigning a callback function as the approximation. This function takes
			a numeric array as the argument and should return a single numeric value or <code>null</code>. Note that
			the numeric array will never contain null values, only true numbers. Instead, if null
			values are present in the raw data, the numeric array will have an <code>.hasNulls</code>

			property set to <code>true</code>. For single-value data sets the data is available in the first
			argument of the callback function. For OHLC data sets, all the open values are in the first
			argument, all high values in the second etc.</p>
		</div>
	</div>
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>

		<span class="default">true</span>
		<div class="description">Enable or disable data grouping.</div>
	</div>
	<div class="member">
		<span class="name">forced</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>

		<div class="description">When data grouping is forced, it runs no matter how small the intervals are.
			This can be handy for example when the sum should be calculated for values appearing at random times
			within each hour.</div>
	</div>
	<div class="member">
		<span class="name">groupPixelWidth</span>
		<span class="type">Number</span>
		<span class="default">2</span>
		<div class="description">The approximate pixel width of each group. If for example a series
			with 30 points is displayed over a 600 pixel wide plot area, no grouping is performed.
			If however the series contains so many points that the spacing is less than the 
			groupPixelWidth, Highcharts will try to group it into appropriate
			groups so that each is more or less two pixels wide. If multiple series with different group
			pixel widths are drawn on the same x axis, all series will take the greatest width. For example,
			line series have 2px default group width, while column series have 10px. If combined, both
			the line and the column will have 10px by default.
			</div>

	</div>
	<div class="member">
		<span class="name">smoothed</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">Normally, a group is indexed by the start of that group, so for example
			when 30 daily values are grouped into one month, that month's x value will be the 1st of 
			the month. This apparently shifts the data to the left. When the smoothed option is true,
			this is compensated for. The data is shifted to the middle of the group, and min and max values
			are preserved. Internally, this is used in the Navigator series.</div>
	</div>

	<div class="member">
		<span class="name">units</span>
		<span class="type">Array</span>
		<span class="default"></span>
		<div class="description">An array determining what time intervals the data is allowed to be
			grouped to. Each array item is an array where the first value is the time unit and the 
			second value another array of allowed multiples. Defaults to:
<pre>units: [[
	'millisecond', // unit name
	[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
], [
	'second',
	[1, 2, 5, 10, 15, 30]
], [
	'minute',
	[1, 2, 5, 10, 15, 30]
], [
	'hour',
	[1, 2, 3, 4, 6, 8, 12]
], [
	'day',
	[1]
], [
	'week',
	[1]
], [
	'month',
	[1, 3, 6]
], [
	'year',
	null
]]</pre>
			</div>
	</div>

</div>

<div class="section">
	<h2>plotOptions.series.dataLabels</h2>
	<h4 class="extends">Extends xAxis.labels</h4>
	<div class="member">
		<span class="name">align</span>
		<span class="type">String</span>

		<span class="default">"center"</span>
		<div class="description">The alignment of the data label compared to the point. Can be 
		one of "left", "center" or "right".</div>
	</div>
	<div class="member">
		<span class="name">color</span>
		<span class="type">String</span>
		<span class="default">null</span>

		<div class="description">The text color for the data labels.</div>
	</div>
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">Enable or disable the data labels.</div>

	</div>
	<div class="member">
		<span class="name">formatter</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Callback JavaScript function to format the data label. Available data are:
						<table>

				<tr>
					<td><code>this.percentage</code></td>
					<td>Stacked series and pies only. The point's percentage of the total.</td>
				</tr>
				<tr>
					<td><code>this.point</code></td>
					<td>The point object. The point name, if defined, is available 
			through <code>this.point.name</code>.</td>

				</tr>
				<tr>
					<td><code>this.series</code>:</td>
					<td>The series object. The series name is available 
			through <code>this.series.name</code>.</td>
				</tr>
				<tr>

					<td><code>this.total</code></td>
					<td>Stacked series only. The total value at this point's x value.</td>
				</tr>				
				<tr>
					<td><code>this.x</code>:</td>
					<td>The y value.</td>
				</tr>

				<tr>
					<td><code>this.y</code>:</td>
					<td>The y value.</td>
				</tr>
			</table>
			Default value:
<pre>formatter: function() {
	return this.y;
}</pre>

		</div>
	</div>
	<div class="member">
		<span class="name">rotation</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">Text rotation in degrees.</div>

	</div>
	<div class="member">
		<span class="name">staggerLines</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">n/a for data labels</div>
	</div>
	<div class="member">

		<span class="name">step</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">n/a for data labels</div>
	</div>
	
	<div class="member">
		<span class="name">style</span>

		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">Styles for the label.</div>
	</div>
	
	<div class="member">
		<span class="name">x</span>
		<span class="type">Number</span>

		<span class="default">0</span>
		<div class="description">The x position offset of the label relative to the point.</div>
	</div>
	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>
		<span class="default">-6</span>

		<div class="description">The y position offset of the label relative to the point.</div>
	</div>
</div>

<div class="section">
	<h2>plotOptions.series.events</h2>
	<div class="member">
		<span class="name">click</span>
		<span class="type">Function</span>

		<span class="default"></span>
		<div class="description">
			Fires when the series is clicked. The <code>this</code> keyword refers to the 
			series object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts. Additionally, <code>event.point</code>
			holds a pointer to the nearest point on the graph.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/series-events-click/">Alert click info</a>
		</div>
	</div>
	<div class="member">
		<span class="name">checkboxClick</span>
		<span class="type">Function</span>
		<span class="default"></span>

		<div class="description">
			Fires when the checkbox next to the series' name in the legend is clicked.. The <code>this</code> keyword refers to the 
			series object itself. One parameter, <code>event</code>, is passed to the function.
			The state of the checkbox is found by <code>event.checked</code>. Return <code>false</code>
			to prevent the default action which is to toggle the select state of the series.
		</div>
	</div>

	<div class="member">
		<span class="name">hide</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the series is hidden after chart generation time, either by clicking
			the legend item or by calling <code>.hide()</code>.
		</div>

	</div>
	<div class="member">
		<span class="name">legendItemClick</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the legend item belonging to the series is clicked. 
			The <code>this</code> keyword refers to the 
			series object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts. The default action is to toggle
			the visibility of the series. This can be prevented by returning <code>false</code>

			or calling <code>event.preventDefault()</code>.
		</div>
	</div>
	<div class="member">
		<span class="name">mouseOver</span>
		<span class="type">Function</span>
		<span class="default"></span>

		<div class="description">
			Fires when the mouse enters the graph. The <code>this</code> keyword refers to the 
			series object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts.
		</div>
	</div>
	<div class="member">
		<span class="name">mouseOut</span>

		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the mouse leaves the graph. The <code>this</code> keyword refers to the 
			series object itself. One parameter, <code>event</code>, is passed to the function.
			This contains common event information based on jQuery or MooTools depending on 
			which library is used as the base for Highcharts. If the 
			<a class="internal" href="#plotOptions-series">stickyTracking</a> option is true,
			<code>mouseOut</code> doesn't happen before the mouse enters another graph or leaves
			the plot area.
		</div>

	</div>
	<div class="member">
		<span class="name">show</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Fires when the series is shown after chart generation time, either by clicking
			the legend item or by calling <code>.show()</code>.
		</div>

	</div>
</div>

<div class="section">
	<h2>plotOptions.series.states</h2>
	<div class="member">
		<span class="name">hover</span>
		<span class="type">plotOptions.series.states.hover</span>
		<span class="default"></span>

		<div class="description">Configuration options for the hovered line. Members are 
		inherited from the default line configuration, but single members can be overridden.
		</div>
	</div>
</div>
<div class="section">
	<h2>plotOptions.series.states.hover</h2>
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>

		<span class="default">false</span>
		<div class="description">
			Enable separate styles for the hovered series to visualize that the user hovers
			either the series itself or the legend. Enabling it has a performance penalty
			as it requires that a second layer be drawn as a double buffer. This means twice 
			as much graphics to draw for each plot, which can make a great difference for
			charts with a high number of series or points.			
		</div>
	</div>
	<div class="member">
		<span class="name">lineWidth</span>
		<span class="type">Number</span>

		<span class="default">2</span>
		<div class="description">
			Pixel with of the graph line.
		</div>
	</div>
	<div class="member">
		<span class="name">marker</span>
		<span class="type">plotOptions.series.marker</span>

		<span class="default"></span>
		<div class="description">
			Defines the appearance of the point markers.
		</div>
	</div>
</div>
<div class="section">
	<h2>plotOptions.series.states.hover.marker</h2>
	<h4 class="extends">Extends plotOptions.series.marker</h4>

	<div class="member">
		<span class="name">states</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description"></div>
	</div>
</div>

<!-- Line plot options -->
<div class="section">

	<h2>plotOptions.line</h2>
	<h4 class="extends">Extends plotOptions.series</h4>
	<div class="member">
		<span class="name">step</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>

		<div class="description">
			Whether to apply steps to the line.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/line-step/">Step line</a>
		</div>
	</div>
	
</div>

<div class="section">
	<h2>plotOptions.line.marker</h2>
	<h4 class="extends">Extends plotOptions.series.marker</h4>
</div>

<div class="section">
	<h2>plotOptions.line.marker.states</h2>
	<h4 class="extends">Extends plotOptions.series.marker.states</h4>
</div>

<div class="section">
	<h2>plotOptions.line.marker.states.hover</h2>
	<h4 class="extends">Extends plotOptions.series.marker.states.hover</h4>
</div>

<div class="section">
	<h2>plotOptions.line.marker.states.select</h2>
	<h4 class="extends">Extends plotOptions.series.marker.states.select</h4>

</div>

<div class="section">
	<h2>plotOptions.line.dataGrouping</h2>
	<h4 class="extends">Extends plotOptions.series.dataGrouping</h4>
</div>

<div class="section">
	<h2>plotOptions.line.dataLabels</h2>
	<h4 class="extends">Extends plotOptions.series.dataLabels</h4>

</div>



<div class="section">
	<h2>plotOptions.line.events</h2>
	<h4 class="extends">Extends plotOptions.series.events</h4>
</div>

<div class="section">
	<h2>plotOptions.line.point</h2>

	<h4 class="extends">Extends plotOptions.series.point</h4>
</div>

<div class="section">
	<h2>plotOptions.line.point.events</h2>
	<h4 class="extends">Extends plotOptions.series.point.events</h4>
</div>
<div class="section">
	<h2>plotOptions.line.states</h2>

	<h4 class="extends">Extends plotOptions.series.states</h4>
</div>

<div class="section">
	<h2>plotOptions.line.states.hover</h2>
	<h4 class="extends">Extends plotOptions.series.states.hover</h4>
</div>
<div class="section">
	<h2>plotOptions.line.states.hover.marker</h2>

	<h4 class="extends">Extends plotOptions.series.states.hover.marker</h4>
</div>

<!-- Spline plot options -->
<div class="section">
	<h2>plotOptions.spline</h2>
	<h4 class="extends">Extends plotOptions.series</h4>
</div>

<div class="section">
	<h2>plotOptions.spline.marker</h2>

	<h4 class="extends">Extends plotOptions.series.marker</h4>
</div>

<div class="section">
	<h2>plotOptions.spline.marker.states</h2>
	<h4 class="extends">Extends plotOptions.series.marker.states</h4>
</div>

<div class="section">
	<h2>plotOptions.spline.marker.states.hover</h2>

	<h4 class="extends">Extends plotOptions.series.marker.states.hover</h4>
</div>

<div class="section">
	<h2>plotOptions.spline.marker.states.select</h2>
	<h4 class="extends">Extends plotOptions.series.marker.states.select</h4>
</div>

<div class="section">
	<h2>plotOptions.spline.dataGrouping</h2>

	<h4 class="extends">Extends plotOptions.series.dataGrouping</h4>
</div>

<div class="section">
	<h2>plotOptions.spline.dataLabels</h2>
	<h4 class="extends">Extends plotOptions.series.dataLabels</h4>
</div>



<div class="section">

	<h2>plotOptions.spline.events</h2>
	<h4 class="extends">Extends plotOptions.series.events</h4>
</div>

<div class="section">
	<h2>plotOptions.spline.point</h2>
	<h4 class="extends">Extends plotOptions.series.point</h4>
</div>

<div class="section">
	<h2>plotOptions.spline.point.events</h2>
	<h4 class="extends">Extends plotOptions.series.point.events</h4>
</div>
<div class="section">
	<h2>plotOptions.spline.states</h2>
	<h4 class="extends">Extends plotOptions.series.states</h4>
</div>

<div class="section">
	<h2>plotOptions.spline.states.hover</h2>
	<h4 class="extends">Extends plotOptions.series.states.hover</h4>
</div>
<div class="section">
	<h2>plotOptions.spline.states.hover.marker</h2>
	<h4 class="extends">Extends plotOptions.series.states.hover.marker</h4>
</div>

<!-- Scatter plot options -->
<div class="section">
	<h2>plotOptions.scatter</h2>
	<h4 class="extends">Extends plotOptions.series</h4>
	<div class="member">
		<span class="name">lineWidth</span>
		<span class="type">Number</span>

		<span class="default">0</span>
		<div class="description">
			The width of the line connecting the data points.
		</div>
		
	</div>
	<div class="member">
		<span class="name">tooltip</span>
		<span class="type">Object</span>

		<span class="default">{}</span>
		<div class="description">
			A configuration object for the tooltip rendering of each single series. Properties are inherited
			from <a class="internal">#tooltip</a>. Overridable properties are <code>headerFormat</code>, <code>pointFormat</code>,
			<code>yDecimals</code>, <code>xDateFormat</code>, <code>yPrefix</code> and <code>ySuffix</code>.
			
			Unlike other series, in a scatter plot the series.name by default shows in the headerFormat 
			and poin.x and point.y in the pointFormat.
		</div>

	</div>
	
	
</div>

<div class="section">
	<h2>plotOptions.scatter.marker</h2>
	<h4 class="extends">Extends plotOptions.series.marker</h4>
</div>

<div class="section">
	<h2>plotOptions.scatter.marker.states</h2>

	<h4 class="extends">Extends plotOptions.series.marker.states</h4>
</div>

<div class="section">
	<h2>plotOptions.scatter.marker.states.hover</h2>
	<h4 class="extends">Extends plotOptions.series.marker.states.hover</h4>
</div>

<div class="section">
	<h2>plotOptions.scatter.marker.states.select</h2>

	<h4 class="extends">Extends plotOptions.series.marker.states.select</h4>
</div>

<div class="section">
	<h2>plotOptions.scatter.dataLabels</h2>
</div>

<div class="section">
	<h2>plotOptions.scatter.dataLabels</h2>
	<h4 class="extends">Extends plotOptions.series.dataLabels</h4>

</div>



<div class="section">
	<h2>plotOptions.scatter.events</h2>
	<h4 class="extends">Extends plotOptions.series.events</h4>
</div>

<div class="section">
	<h2>plotOptions.scatter.point</h2>

	<h4 class="extends">Extends plotOptions.series.point</h4>
</div>

<div class="section">
	<h2>plotOptions.scatter.point.events</h2>
	<h4 class="extends">Extends plotOptions.series.point.events</h4>
</div>

<div class="section">
	<h2>plotOptions.scatter.states</h2>

	<h4 class="extends">Extends plotOptions.series.states</h4>
</div>

<div class="section">
	<h2>plotOptions.scatter.states.hover</h2>
	<h4 class="extends">Extends plotOptions.series.states.hover</h4>
	<div class="member">
		<span class="name">lineWidth</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The width of the line connecting the data points.
		</div>
	</div>
</div>
<div class="section">
	<h2>plotOptions.scatter.states.hover.marker</h2>

	<h4 class="extends">Extends plotOptions.series.states.hover.marker</h4>
</div>

<!-- Area plot options -->
<div class="section">
	<h2>plotOptions.area</h2>
	<h4 class="extends">Extends plotOptions.series</h4>
	
	<div class="member">
		<span class="name">fillColor</span>

		<span class="type">Color</span>
		<span class="default">null</span>
		<div class="description">
			Fill color or gradient for the area. When <code>null</code>, the series' <code>color</code>  is 
			used with the series' <code>fillOpacity</code>.
		</div>

	</div>
	<div class="member">
		<span class="name">fillOpacity</span>
		<span class="type">Number</span>
		<span class="default">.75</span>
		<div class="description">
			Fill opacity for the area.
		</div>

	</div>
	<div class="member">
		<span class="name">lineColor</span>
		<span class="type">Color</span>
		<span class="default">null</span>
		<div class="description">
			A separate color for the graph line. By default the line takes the <code>color</code>

			of the series, but the lineColor setting allows setting a separate
			color for the line without altering the <code>fillColor</code>.
		</div>
	</div>
	
	<div class="member">
		<span class="name">threshold</span>
		<span class="type">Number</span>
		<span class="default">0</span>

		<div class="description">
			The Y axis value to serve as the base for the area, for distinguishing
			between values above and below a threshold. If <code>null</code>, the area behaves
			like a line series with fill between the graph and the Y axis minimum.
		</div>
	</div>
	
	
</div>

<div class="section">
	<h2>plotOptions.area.marker</h2>
	<h4 class="extends">Extends plotOptions.series.marker</h4>

</div>

<div class="section">
	<h2>plotOptions.area.marker.states</h2>
	<h4 class="extends">Extends plotOptions.series.marker.states</h4>
</div>

<div class="section">
	<h2>plotOptions.area.marker.states.hover</h2>
	<h4 class="extends">Extends plotOptions.series.marker.states.hover</h4>

</div>

<div class="section">
	<h2>plotOptions.area.marker.states.select</h2>
	<h4 class="extends">Extends plotOptions.series.marker.states.select</h4>
</div>

<div class="section">
	<h2>plotOptions.area.dataGrouping</h2>
	<h4 class="extends">Extends plotOptions.series.dataGrouping</h4>

</div>

<div class="section">
	<h2>plotOptions.area.dataLabels</h2>
	<h4 class="extends">Extends plotOptions.series.dataLabels</h4>
</div>

<div class="section">
	<h2>plotOptions.area.events</h2>
	<h4 class="extends">Extends plotOptions.series.events</h4>

</div>

<div class="section">
	<h2>plotOptions.area.point</h2>
	<h4 class="extends">Extends plotOptions.series.point</h4>
</div>

<div class="section">
	<h2>plotOptions.area.point.events</h2>
	<h4 class="extends">Extends plotOptions.series.point.events</h4>

</div>


<div class="section">
	<h2>plotOptions.area.states</h2>
	<h4 class="extends">Extends plotOptions.series.states</h4>
</div>

<div class="section">
	<h2>plotOptions.area.states.hover</h2>
	<h4 class="extends">Extends plotOptions.series.states.hover</h4>

</div>
<div class="section">
	<h2>plotOptions.area.states.hover.marker</h2>
	<h4 class="extends">Extends plotOptions.series.states.hover.marker</h4>
</div>


<!-- Areaspline plot options -->
<div class="section">
	<h2>plotOptions.areaspline</h2>
	<h4 class="extends">Extends plotOptions.area</h4>

</div>

<div class="section">
	<h2>plotOptions.areaspline.marker</h2>
	<h4 class="extends">Extends plotOptions.area.marker</h4>
</div>

<div class="section">
	<h2>plotOptions.areaspline.marker.states</h2>
	<h4 class="extends">Extends plotOptions.area.marker.states</h4>

</div>

<div class="section">
	<h2>plotOptions.areaspline.marker.states.hover</h2>
	<h4 class="extends">Extends plotOptions.area.marker.states.hover</h4>
</div>

<div class="section">
	<h2>plotOptions.areaspline.marker.states.select</h2>
	<h4 class="extends">Extends plotOptions.area.marker.states.select</h4>

</div>

<div class="section">
	<h2>plotOptions.areaspline.dataGrouping</h2>
	<h4 class="extends">Extends plotOptions.area.dataGrouping</h4>
</div>

<div class="section">
	<h2>plotOptions.areaspline.dataLabels</h2>
	<h4 class="extends">Extends plotOptions.area.dataLabels</h4>

</div>



<div class="section">
	<h2>plotOptions.areaspline.events</h2>
	<h4 class="extends">Extends plotOptions.area.events</h4>
</div>

<div class="section">
	<h2>plotOptions.areaspline.point</h2>

	<h4 class="extends">Extends plotOptions.area.point</h4>
</div>

<div class="section">
	<h2>plotOptions.areaspline.point.events</h2>
	<h4 class="extends">Extends plotOptions.area.point.events</h4>
</div>

<div class="section">
	<h2>plotOptions.areaspline.states</h2>

	<h4 class="extends">Extends plotOptions.area.states</h4>
</div>

<div class="section">
	<h2>plotOptions.areaspline.states.hover</h2>
	<h4 class="extends">Extends plotOptions.area.states.hover</h4>
</div>
<div class="section">
	<h2>plotOptions.areaspline.states.hover.marker</h2>

	<h4 class="extends">Extends plotOptions.area.states.hover.marker</h4>
</div>


<!-- Column plot options -->
<div class="section">
	<h2>plotOptions.column</h2>
	<h4 class="extends">Extends plotOptions.series</h4>
	<div class="member">
		<span class="name">borderColor</span>

		<span class="type">Color</span>
		<span class="default">"#FFFFFF"</span>
		<div class="description">
			The color of the border surronding each column or bar.
		</div>
	</div>
	<div class="member">
		<span class="name">borderRadius</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The corner radius of the border surronding each column or bar.
		</div>
	</div>
	<div class="member">
		<span class="name">borderWidth</span>

		<span class="type">Number</span>
		<span class="default">1</span>
		<div class="description">
			The width of the border surronding each column or bar.
		</div>
	</div>
	
	<div class="member">
		<span class="name">colorByPoint</span>

		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			When using automatic point colors pulled from the <code>options.colors</code>
			collection, this option determines whether the chart should receive 
			one color per series or one color per point.
		</div>
	</div>

	
	<div class="member">
		<span class="name">cropThreshold</span>
		<span class="type">Number</span>
		<span class="default">50</span>
		<div class="description">
			When the series contains less points than the crop threshold, all points are drawn, 
			event if the points fall outside the visible plot area at the current zoom. The advantage
			of drawing all points (including markers and columns), is that animation is performed on
			updates. On the other hand, when the series contains more points than the crop threshold,
			the series data is cropped to only contain points that fall within the plot area. The advantage
			of cropping away invisible points is to increase performance on large series.  
		</div>
	</div>

	<div class="member">
		<span class="name">groupPadding</span>
		<span class="type">Number</span>
		<span class="default">0.2</span>
		<div class="description">
			Padding between each value groups, in x axis units.
		</div>
	</div>

	<div class="member">
		<span class="name">minPointLength</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The minimal height for a column or width for a bar. By default, 0 values
			are not shown. To visualize a 0 (or close to zero) point, set the minimal point length to a 
			pixel value like 3. In stacked column charts, minPointLength might not be respected for tightly
			packed values.
		</div>
	</div>

	<div class="member">
		<span class="name">pointPadding</span>
		<span class="type">Number</span>
		<span class="default">0.1</span>
		<div class="description">
			Padding between each column or bar, in x axis units.
		</div>
	</div>

	<div class="member">
		<span class="name">pointRange</span>
		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			The width of each point on the x axis. For example in a column chart with one value each day,
			the pointRange would be 1 day (= 24 * 3600 * 1000 milliseconds). This is normally computed
			automatically, but this option can be used to override the automatic value. In a series on
			a categorized axis the pointRange is 1 by default.
		</div>
	</div>

	<div class="member">
		<span class="name">pointWidth</span>
		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			A pixel value specifying a fixed width for each column or bar. When <code>null</code>,
			the width is calculated from the <code>pointPadding</code> and <code>groupPadding</code>.
		</div>

	</div>
</div>


<div class="section">
	<h2>plotOptions.column.dataGrouping</h2>
	<h4 class="extends">Extends plotOptions.series.dataGrouping</h4>
	<div class="member">
		<span class="name">approximation</span>

		<span class="type">String</span>
		<span class="default">"sum"</span>
		<div class="description">The method of approximation inside a group. When for example
			30 days are grouped into one month, this determines what value should represent the
			group. Possible values are "average", "open", "high", "low", "close" and "sum". For
			OHLC and candlestick series the approximation is always "ohlc", which finds the 
			open, high, low and close values within all the grouped data.</div>
	</div>
	<div class="member">
		<span class="name">groupPixelWidth</span>
		<span class="type">Number</span>

		<span class="default">10</span>
		<div class="description">The approximate pixel width of each group. If for example a series
			with 30 points is displayed over a 600 pixel wide plot area, no grouping is performed.
			If however the series contains so many points that the spacing is less than the 
			groupPixelWidth, Highcharts will try to group it into appropriate
			groups so that each is more or less two pixels wide.</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/series-datagrouping-grouppixelwidth/">
				Two series with the same data density but different groupPixelWidth
			</a>
		</div>
	</div>

</div>

<div class="section">
	<h2>plotOptions.column.dataLabels</h2>
	<h4 class="extends">Extends plotOptions.series.dataLabels</h4>
</div>



<div class="section">
	<h2>plotOptions.column.events</h2>

	<h4 class="extends">Extends plotOptions.series.events</h4>
</div>

<div class="section">
	<h2>plotOptions.column.point</h2>
	<h4 class="extends">Extends plotOptions.series.point</h4>
</div>

<div class="section">
	<h2>plotOptions.column.point.events</h2>

	<h4 class="extends">Extends plotOptions.series.point.events</h4>
</div>

<div class="section">
	<h2>plotOptions.column.states</h2>
	<h4 class="extends">Extends plotOptions.series.states</h4>
</div>

<div class="section">
	<h2>plotOptions.column.states.hover</h2>

	<h4 class="extends">Extends plotOptions.series.states.hover</h4>
	<div class="member">
		<span class="name">brightness</span>
		<span class="type">Number</span>
		<span class="default">0.1</span>
		<div class="description">
			How much to brighten the point on interaction. Requires the main color to be defined in hex or rgb(a) format.
		</div>

	</div>
</div>
<div class="section">
	<h2>plotOptions.column.states.hover.marker</h2>
	<h4 class="extends">Extends plotOptions.series.states.hover.marker</h4>
</div>


<!-- OHLC plot options -->
<div class="section">
	<h2>plotOptions.ohlc</h2>

	<h4 class="extends">Extends plotOptions.column</h4>
	
	<div class="member">
		<span class="name">borderColor</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>
	</div>

	<div class="member">
		<span class="name">borderRadius</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>
	</div>
	<div class="member">
		<span class="name">borderWidth</span>

		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>
	</div>
	
	<div class="member">
		<span class="name">lineWidth</span>
		<span class="type">Number</span>

		<span class="default">1</span>
		<div class="description">The pixel width of the line/border.</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/ohlc-linewidth/">A greater line width</a>
		</div>
	</div>
	
	
</div>


<div class="section">
	<h2>plotOptions.ohlc.dataGrouping</h2>
	<h.flagsss="extends">Extends plotOptions.column.dataGrouping</h4>
	<div class="member">
		<span class="name">groupPixelWidth</span>
		<span class="type">Number</span>

		<span class="default">5</span>
		<div class="description">The approximate pixel width of each group. If for example a series
			with 30 points is displayed over a 600 pixel wide plot area, no grouping is performed.
			If however the series contains so many points that the spacing is less than the 
			groupPixelWidth, Highcharts will try to group it into appropriate
			groups so that each is more or less two pixels wide.</div>
	</div>
</div>

<div class="section">
	<h2>plotOptions.ohlc.dataLabels</h2>
	<h4 class="extends">Extends plotOptions.column.dataLabels</h4>

</div>

<div class="section">
	<h2>plotOptions.ohlc.events</h2>
	<h4 class="extends">Extends plotOptions.column.events</h4>
</div>

<div class="section">
	<h2>plotOptions.ohlc.point</h2>
	<h4 class="extends">Extends plotOptions.column.point</h4>

</div>

<div class="section">
	<h2>plotOptions.ohlc.point.events</h2>
	<h4 class="extends">Extends plotOptions.column.point.events</h4>
</div>


<div class="section">
	<h2>plotOptions.ohlc.states</h2>
	<h4 class="extends">Extends plotOptions.column.states</h4>

</div>

<div class="section">
	<h2>plotOptions.ohlc.states.hover</h2>
	<h4 class="extends">Extends plotOptions.column.states.hover</h4>
	
	<div class="member">
		<span class="name">lineWidth</span>
		<span class="type">Number</span>

		<span class="default">3</span>
		<div class="description">The pixel width of the line representing the OHLC point.</div>		
	</div>
</div>
<div class="section">
	<h2>plotOptions.ohlc.states.hover.marker</h2>
	<h4 class="extends">Extends plotOptions.column.states.hover.marker</h4>
</div>


<!-- Candlestick plot options -->
<div class="section">
	<h2>plotOptions.candlestick</h2>
	<h4 class="extends">Extends plotOptions.column</h4>
	
	<div class="member">
		<span class="name">borderColor</span>
		<span class="type"></span>

		<span class="default"></span>
		<div class="description">N/A</div>
	</div>
	<div class="member">
		<span class="name">borderRadius</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>

	</div>
	<div class="member">
		<span class="name">borderWidth</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>
	</div>
	
	<div class="member">

		<span class="name">lineColor</span>
		<span class="type">Color</span>
		<span class="default">"black"</span>
		<div class="description">The color of the line/border of the candlestick.</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/candlestick-linecolor/">Red lines</a>

		</div>
	</div>
	<div class="member">
		<span class="name">lineWidth</span>
		<span class="type">Number</span>
		<span class="default">1</span>
		<div class="description">The pixel width of the candlestick line/border.</div>

	</div>
	
	<div class="member">
		<span class="name">upColor</span>
		<span class="type">Color</span>
		<span class="default">"white"</span>
		<div class="description">The fill color of the candlestick when values are rising.</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/candlestick-color/">Custom colors</a>
		</div>
	</div>
	
</div>


<div class="section">
	<h2>plotOptions.candlestick.dataGrouping</h2>
	<h4 class="extends">Extends plotOptions.column.dataGrouping</h4>

</div>

<div class="section">
	<h2>plotOptions.candlestick.dataLabels</h2>
	<h4 class="extends">Extends plotOptions.column.dataLabels</h4>
</div>

<div class="section">
	<h2>plotOptions.candlestick.events</h2>
	<h4 class="extends">Extends plotOptions.column.events</h4>

</div>

<div class="section">
	<h2>plotOptions.candlestick.point</h2>
	<h4 class="extends">Extends plotOptions.column.point</h4>
</div>

<div class="section">
	<h2>plotOptions.candlestick.point.events</h2>
	<h4 class="extends">Extends plotOptions.column.point.events</h4>

</div>


<div class="section">
	<h2>plotOptions.candlestick.states</h2>
	<h4 class="extends">Extends plotOptions.column.states</h4>
</div>

<div class="section">
	<h2>plotOptions.candlestick.states.hover</h2>
	<h4 class="extends">Extends plotOptions.column.states.hover</h4>

	
	<div class="member">
		<span class="name">lineWidth</span>
		<span class="type">Number</span>
		<span class="default">2</span>
		<div class="description">The pixel width of the line/border around the candlestick.</div>		
	</div>
</div>
<div class="section">

	<h2>plotOptions.candlestick.states.hover.marker</h2>
	<h4 class="extends">Extends plotOptions.column.states.hover.marker</h4>
</div>




<!-- Flags plot options -->
<div class="section">
	<h2>plotOptions.flags</h2>
	<h4 class="extends">Extends plotOptions.column</h4>

	
	<div class="member">
		<span class="name">borderColor</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>
	</div>
	<div class="member">
		<span class="name">borderRadius</span>

		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>
	</div>
	<div class="member">
		<span class="name">borderWidth</span>
		<span class="type"></span>
		<span class="default"></span>

		<div class="description">N/A</div>
	</div>
	<div class="member">
		<span class="name">colorByPoint</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>

	</div>
	<div class="member">
		<span class="name">pointPadding</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>
	</div>
	<div class="member">

		<span class="name">pointWidth</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>
	</div>
	<div class="member">
		<span class="name">animation</span>

		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>
	</div>
	<div class="member">
		<span class="name">dashStyle</span>
		<span class="type"></span>
		<span class="default"></span>

		<div class="description">N/A</div>
	</div>
	<div class="member">
		<span class="name">dataGrouping</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>

	</div>
	<div class="member">
		<span class="name">turboThreshold</span>
		<span class="type"></span>
		<span class="default"></span>
		<div class="description">N/A</div>
	</div>
	
	<div class="member">

		<span class="name">lineColor</span>
		<span class="type">Color</span>
		<span class="default">"black"</span>
		<div class="description">The color of the line/border of the flag.</div>
	</div>
	<div class="member">
		<span class="name">lineWidth</span>

		<span class="type">Number</span>
		<span class="default">1</span>
		<div class="description">The pixel width of the candlestick line/border.</div>
	</div>
	<div class="member">
		<span class="name">onSeries</span>
		<span class="type">String</span>

		<span class="default">undefined</span>
		<div class="description">The id of the series that the flags should be drawn on. If no id is given,
			the flags are drawn on the x axis.</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/flags/">Flags on series and on x axis</a>
		</div>
	</div>
	<div class="member">

		<span class="name">shape</span>
		<span class="type">String</span>
		<span class="default">"flag"</span>
		<div class="description">The shape of the marker. Can be one of "flag", "circlepin", "squarepin".</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/flags/">Different shapes</a>

		</div>
	</div>
	<div class="member">
		<span class="name">stackDistance</span>
		<span class="type">Number</span>
		<span class="default">7</span>
		<div class="description">When multiple flags fall on the same value, this number determines the vertical
			offset between them</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/flags-stackdistance/">A greater stack distance</a>
		</div>
	</div>
	<div class="member">
		<span class="name">style</span>
		<span class="type">CSSObject</span>

		<span class="default"></span>
		<div class="description">The text styles of the flag. Defaults to:
<pre>style: {
	fontSize: '11px',
	fontWeight: 'bold',
	textAlign: 'center'
}</pre></div>		
	</div>
	<div class="member">
		<span class="name">title</span>
		<span class="type">Text</span>
		<span class="default">"A"</span>

		<div class="description">The text to display on each flag. This can be defined on series level, or 
			individually for each point.</div>		
	</div>
	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>
		<span class="default">-30</span>
		<div class="description">The y position of the top left corner of the flag relative to either the series (if
			onSeries is defined), or the x axis.</div>		
	</div>

	
	
</div>


<div class="section">
	<h2>plotOptions.flags.dataGrouping</h2>
	<h4 class="extends">Extends plotOptions.column.dataGrouping</h4>
</div>

<div class="section">
	<h2>plotOptions.flags.dataLabels</h2>

	<h4 class="extends">Extends plotOptions.column.dataLabels</h4>
</div>

<div class="section">
	<h2>plotOptions.flags.events</h2>
	<h4 class="extends">Extends plotOptions.column.events</h4>
</div>

<div class="section">
	<h2>plotOptions.flags.point</h2>

	<h4 class="extends">Extends plotOptions.column.point</h4>
</div>

<div class="section">
	<h2>plotOptions.flags.point.events</h2>
	<h4 class="extends">Extends plotOptions.column.point.events</h4>
</div>


<div class="section">
	<h2>plotOptions.flags.states</h2>

	<h4 class="extends">Extends plotOptions.column.states</h4>
</div>

<div class="section">
	<h2>plotOptions.flags.states.hover</h2>
	<h4 class="extends">Extends plotOptions.column.states.hover</h4>
	
	<div class="member">
		<span class="name">lineColor</span>

		<span class="type">String</span>
		<span class="default">"black"</span>
		<div class="description">The color of the line/border of the flag</div>		
	</div>
	<div class="member">
		<span class="name">fillColor</span>
		<span class="type">String</span>

		<span class="default">"#FCFFC5"</span>
		<div class="description">The fill or background color of the flag</div>		
	</div>
</div>
<div class="section">
	<h2>plotOptions.ohlc.states.hover.marker</h2>
	<h4 class="extends">Extends plotOptions.column.states.hover.marker</h4>
</div>
<div class="section">

	<h2>labels</h2>
	<div class="section-description">
	HTML labels that can be positioined anywhere in the chart area. 
	</div>
	<div class="member">
		<span class="name">items</span>
		<span class="type">Array&lt;labels.item&gt;</span>

		<span class="default"></span>
		<div class="description">
			An array containing configuration for each label.
		</div>
	</div>
	<div class="member">
		<span class="name">style</span>
		<span class="type">CSSObject</span>

		<span class="default"></span>
		<div class="description">
			Shared CSS styles for all labels. Defaults to:
<pre>style: {
	color: '#3E576F'
}</pre>
		</div>
	</div>	
</div>

<div class="section">
	<h2>labels.items</h2>

	<div class="section-description">
	A HTML label that can be positioined anywhere in the chart area. 
	</div>
	<div class="member">
		<span class="name">html</span>
		<span class="type">String</span>
		<span class="default">""</span>
		<div class="description">

			Inner HTML or text for the label.
		</div>
	</div>
	<div class="member">
		<span class="name">style</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">

			CSS styles for each label. To position the label, use left and top like this:
<pre>style: {
	left: '100px',
	top: '100px'
}</pre> 
		</div>
	</div>
</div>
<div class="section">
	<h2>legend</h2>
	<div class="section-description">
	The legend is a box containing a symbol and name for each series item
	or point item in the chart. 
	</div>

	
	<div class="member">
		<span class="name">align</span>
		<span class="type">String</span>
		<span class="default">"center"</span>
		<div class="description">
			The horizontal alignment of the legend box within the chart area.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/legend/align/">Various legend options</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">backgroundColor</span>
		<span class="type">Color</span>
		<span class="default">null</span>

		<div class="description">
			The background color of the legend, filling the rounded corner border.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/legend/align/">Various legend options</a>
		</div>
	</div>
	<div class="member">
		<span class="name">borderColor</span>

		<span class="type">Color</span>
		<span class="default">#909090</span>
		<div class="description">
			The color of the drawn border around the legend.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/legend/align/">Various legend options</a>
		</div>

	</div>
	<div class="member">
		<span class="name">borderRadius</span>
		<span class="type">Number</span>
		<span class="default">5</span>
		<div class="description">
			The border corner radius of the legend.
		</div>

	</div>	
	<div class="member">
		<span class="name">borderWidth</span>
		<span class="type">Number</span>
		<span class="default">1</span>
		<div class="description">
			The width of the drawn border around the legend.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/legend/align/">Various legend options</a>
		</div>
	</div>
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>

		<span class="default">false</span>
		<div class="description">
			Enable or disable the legend.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/legend/align/">Various legend options</a>
		</div>
	</div>

	<div class="member">
		<span class="name">floating</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			When the legend is floating, the plot area ignores it and is allowed
			to be placed below it. 
		</div>
	</div>

	<div class="member">
		<span class="name">itemHiddenStyle</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for each legend item when the corresponding series or point
			is hidden. Properties are inherited
			from <code>style</code> unless overridden here. Defaults to:

<pre>itemHiddenStyle: {
	color: '#CCC'
}</pre> 
		</div>
	</div>
	<div class="member">
		<span class="name">itemHoverStyle</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">

			CSS styles for each legend item in hover mode. Properties are inherited
			from <code>style</code> unless overridden here. Defaults to:
<pre>itemHoverStyle: {
	color: '#000'
}</pre> 
		</div>
	</div>
	<div class="member">
		<span class="name">itemMarginBottom</span>
		<span class="type">Number</span>

		<span class="default">0</span>
		<span class="since">1.1</span>
		<div class="description">
			The pixel bottom margin for each legend item.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/MYHKF/">Greater margin between items</a>
		</div>

	</div>
	<div class="member">
		<span class="name">itemMarginTop</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<span class="since">1.1</span>
		<div class="description">

			The pixel top margin for each legend item.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/MYHKF/">Greater margin between items</a>
		</div>
	</div>
	<div class="member">
		<span class="name">itemStyle</span>

		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for each legend item. Defaults to:
<pre>itemStyle: {
	cursor: 'pointer',
	color: '#3E576F'
}</pre> 
		</div>
	</div>
	
	<div class="member">
		<span class="name">itemWidth</span>

		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			The width for each legend item. This is useful in a horizontal layout with
			many items when you want the items to align vertically.  
		</div>
	</div>
	
	<div class="member">
		<span class="name">layout</span>

		<span class="type">String</span>
		<span class="default">"horizontal"</span>
		<div class="description">
			The layout of the legend items. Can be one of "horizontal" or "vertical".
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/legend/layout-horizontal/">Horizontal by default</a>
		</div>

	</div>
	<div class="member">
		<span class="name">labelFormatter</span>
		<span class="type">Function</span>
		<span class="default"></span>
		<div class="description">
			Callback function to format each of the series' labels. The <em>this</em>

			keyword refers to the series object, or the point object in case of pie charts.
			Defaults to:
<pre>labelFormatter: function() {
	return this.name
}</pre>
		</div>
	</div>
	
	<div class="member">
		<span class="name">margin</span>
		<span class="type">Number</span>
		<span class="default">15</span>

		<div class="description">
			If the plot area sized is calculated automatically and the legend
			is not floating, the legend margin is the 
			space between the legend and the axis labels or plot area. 
		</div>
	</div>
	
		
	<div class="member">
		<span class="name">padding</span>
		<span class="type">Number</span>
		<span class="default">5</span>

		<span class="since">1.1</span>
		<div class="description">
			The inner padding of the legend box. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/adczm/">A padding of 15 pixels</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">reversed</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			Whether to reverse the order of the legend items compared to the order
			of the series or points as defined in the configuration object. 
		</div>
	</div>

	<div class="member">
		<span class="name">shadow</span>
		<span class="type">Boolean</span>
		<span class="default">false</span>
		<div class="description">
			Whether to apply a drop shadow to the legend. A <code>backgroundColor</code>

			also needs to be applied for this to take effect.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/legend/align/">Various legend options</a>
		</div>
	</div>
	<div class="member">
		<span class="name">style</span>

		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the legend area. In the 1.x versions the position of the legend area
			was determined by CSS. In 2.x, the position is determined by properties like 
			<code>align</code>, <code>verticalAlign</code>, <code>x</code> and <code>y</code>,
			but the styles are still parsed for backwards compatibility. 
		</div>

	</div>
	<div class="member">
		<span class="name">symbolPadding</span>
		<span class="type">Number</span>
		<span class="default">5</span>
		<div class="description">
			The pixel padding between the legend item symbol and the legend item text.
		</div>

	</div>
	<div class="member">
		<span class="name">symbolWidth</span>
		<span class="type">Number</span>
		<span class="default">30</span>
		<div class="description">
			The pixel width of the legend item symbol.
		</div>

	</div>
	
	<div class="member">
		<span class="name">verticalAlign</span>
		<span class="type">String</span>
		<span class="default">"bottom"</span>
		<div class="description">
			The vertical alignment of the legend box. Can be one of "top", "middle" or 
			"bottom". Vertical position can be further determined by the <code>y</code>

			option.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/legend/align/">Various legend options</a> 
		</div>
	</div>
	
	<div class="member">
		<span class="name">width</span>
		<span class="type">Number</span>

		<span class="default">null</span>
		<div class="description">
			The width of the legend box, not including style.padding.  
		</div>
	</div>
	
	<div class="member">
		<span class="name">x</span>
		<span class="type">Number</span>

		<span class="default">0</span>
		<div class="description">
			The x offset of the legend relative to its horizontal alignment <code>align</code>
			within chart.spacingLeft and chart.spacingRight. Negative
			x moves it to the left, positive x moves it to the right. The default value of 
			15 together with <code>align: "center"</code> puts it in the center of the 
			plot area.
		</div>
	</div>

	
	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The vertical offset of the legend relative to it's vertical alignment
			<code>verticalAlign</code> within chart.spacingTop and chart.spacingBottom. Negative
			y moves it up, positive y moves it down.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/legend/align/">Various legend options</a> 
		</div>
	</div>
</div>

<!-- The loading screen -->
<div class="section">
	<h2>loading</h2>
	<div class="section-description">

	The loading options control the appearance of the loading screen that covers the 
	plot area on chart operations. This screen only appears after an explicit call
	to <code>chart.showLoading()</code>. It is a utility for developers to communicate
	to the end user that something is going on, for example while retrieving new data
	via an XHR connection. The "Loading..." text itself is not part of this configuration
	object, but part of the <code>lang</code> object. 
	</div>
	
	<div class="member">
		<span class="name">hideDuration</span>
		<span class="type">Number</span>
		<span class="default">100</span>

		<div class="description">
			The duration in milliseconds of the fade out effect.
		</div>
	</div>
	<div class="member">
		<span class="name">labelStyle</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>

		<div class="description">
			CSS styles for the loading label <code>span</code>. Defaults to:
<pre>labelStyle: {
	fontWeight: 'bold',
	position: 'relative',
	top: '1em'
}</pre> 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/loading/general/">Label styles</a> 
		</div>
	</div>

	<div class="member">
		<span class="name">showDuration</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The duration in milliseconds of the fade in effect.
		</div>
	</div>

	<div class="member">
		<span class="name">style</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the loading screen that covers the plot area. Defaults to:
<pre>style: {
	position: 'absolute',
	backgroundColor: 'white',
	opacity: 0.5,
	textAlign: 'center'
}</pre> 
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/loading/general/">Gray plot area, white text</a> 
		</div>
	</div>
</div>
<div class="section">
	<h2>tooltip</h2>
	<div class="section-description">
	Options for the tooltip that appears when the user hovers over a series or point. 
	</div>

	
	<div class="member">
		<span class="name">backgroundColor</span>
		<span class="type">Color</span>
		<span class="default">"rgba(255, 255, 255, .85)"</span>
		<div class="description">
			The background color or gradient for the tooltip.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/tooltip/general/">Styled tooltip</a>
		</div>
	</div>
	<div class="member">
		<span class="name">borderColor</span>
		<span class="type">Color</span>
		<span class="default">"auto"</span>

		<div class="description">
			The color of the tooltip border. When <code>null</code>, the border takes the color of the
			corresponding series or point.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/tooltip/general/">Styled tooltip</a>
		</div>
	</div>
	<div class="member">

		<span class="name">borderRadius</span>
		<span class="type">Number</span>
		<span class="default">5</span>
		<div class="description">
			The radius of the rounded border corners.
		</div>
	</div>
	<div class="member">

		<span class="name">borderWidth</span>
		<span class="type">Number</span>
		<span class="default">2</span>
		<div class="description">
			The pixel width of the tooltip border.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/tooltip/general/">Styled tooltip</a>

		</div>
	</div>
	<div class="member">
		<span class="name">changeDecimals</span>
		<span class="type">Number</span>
		<span class="default"></span>
		<span class="since">1.0.1</span>

		<div class="description">
			How many decimals to show for the <code>point.change</code> value when the <code>series.compare</code>
			option is set. This is overridable in each series' tooltip options object.
			The default is to preserve all decimals. 
		</div>
	</div>
	<div class="member">
		<span class="name">crosshairs</span>

		<span class="type">Mixed</span>
		<span class="default">true</span>
		<div class="description">
			Display crosshairs to connect the points with their corresponding axis values. The crosshairs can
			be defined as a boolean, an array of booleans or an array of objects.
			<dl>
				<dt>Boolean</dt>
				<dd>If the crosshairs option is true, a single crosshair relating to the
				x axis will be shown.</dd>

				
				<dt>Array of booleans</dt>
				<dd>In an array of booleans, the first value turns on the x axis crosshair and the second
				value to the y axis crosshair. Use <code>[true, true]</code> to show complete crosshairs.</dd>
				
				<dt>Array of objects</dt>
				<dd>In an array of objects, the first value applies to the x axis crosshair and the second
				value to the y axis crosshair. For each dimension, a <code>width</code>, <code>color</code>

				<code><a href="http://jsfiddle.net/cSrgA/">dashStyle</a></code> and <code>zIndex</code> can be given.
				can be given.</dd>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/tooltip/crosshairs-dashed/">Dashed crosshairs</a>;
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/tooltip/crosshairs-xy/">true two-dimensional crosshairs</a>.
		</div>

	</div>
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Enable or disable the tooltip.
		</div>

	</div>
	<div class="member">
		<span class="name">headerFormat</span>
		<span class="type">String</span>
		<span class="default"></span>
		<div class="description">
			<p>The HTML of the tooltip header line. Variables are enclosed by curly brackets. Available variables
			are point.key, series.name and series.color. The point.key variable contains the category name,
			x value or datetime string depending on the type of axis. For datetime axes, the point.key date
			format can be set using tooltip.xDateFormat.</p>

			
			<p>Defaults to <code>&lt;span style="font-size: 10px"&gt;{point.key}&lt;/span&gt;&lt;br/&gt;</code></p>
		</div>
	</div>
	<div class="member">
		<span class="name">formatter</span>
		<span class="type">Function</span>

		<span class="default"></span>
		<div class="description">
			<p>Callback function to format the text of the tooltip from scratch. Return false to disable
			tooltip for a specific point on series.</p>
			<p>A subset of HTML is supported. The HTML of the tooltip is parsed and converted to SVG, 
			therefore this isn't a complete HTML renderer. The following tabs are supported: 
			<code>&lt;b&gt;</code>, <code>&lt;strong&gt;</code>,
			<code>&lt;i&gt;</code>, <code>&lt;em&gt;</code>, <code>&lt;br/&gt;</code>, <code>&lt;span&gt;</code>.
			Spans can be styled with a <code>style</code> attribute, but only text-related CSS that is 
			shared with SVG is handled.
			</p>

			<p>Since version 2.1 the tooltip can be shared between multiple series through 
			the <code>shared</code> option. The available data in the formatter differ a bit
			depending on whether the tooltip is shared or not. In a shared tooltip, all 
			properties except <code>x</code>, which is common for all points, are kept in 
			an array, <code>this.points</code>.</p>
			
			<p>Available data are:</p>
			<dl>
				<dt>this.percentage (not shared) / this.points[i].percentage (shared)</dt>

				<dd>Stacked series and pies only. The point's percentage of the total.</dd>
				
				<dt>this.point (not shared) / this.points[i].point (shared)</dt>
				<dd>The point object. The point name, if defined, is available 
			through <code>this.point.name</code>.</dd>
				
				<dt>this.points</dt>
				<dd>In a shared tooltip, this is an array containing all other properties for each point.</dd>

				
				<dt>this.series (not shared) / this.points[i].series (shared)</dt>
				<dd>The series object. The series name is available 
			through <code>this.series.name</code>.</dd>
			
				<dt>this.total (not shared) / this.points[i].total (shared)</dt>
				<dd>Stacked series only. The total value at this point's x value.</dd>
				
				<dt>this.x</dt>

				<dd>The x value. This property is the same regardless of the tooltip being shared or not.</dd>
				
				<dt>this.y (not shared) / this.points[i].y (shared)</dt>
				<dd>The y value.</dd>
			
			</dl>
		</div>
		<div class="demo">		
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/tooltip/formatter/">formatting with shared tooltip</a>

		</div>
	</div>
	<div class="member">
		<span class="name">pointFormat</span>
		<span class="type">String</span>
		<span class="default"></span>
		<div class="description">
			<p>The HTML of the point's line in the tooltip. Variables are enclosed by curly brackets. Available variables
			are point.x, point.y, point.change, series.name and series.color and other properties on the same form. Furthermore, 
			point.y can be extended by the tooltip.yPrefix
			and tooltip.ySuffix variables. This can also be overridden for each series, which makes it a good hook for displaying
			units.</p>

			
			<p>Defaults to <code>&lt;span style="color:{series.color}"&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y}&lt;/b&gt;&lt;br/&gt;</code></p>
		</div>
	</div>
	<div class="member">

		<span class="name">shadow</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Whether to apply a drop shadow to the tooltip.
		</div>
	</div>
	<div class="member">

		<span class="name">shared</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			When the tooltip is shared, the entire plot area will capture mouse movement, and tooltip texts 
			for all series will be shown in a single bubble. This is recommended for single series charts
			and for iPad optimized sites.
		</div>
	</div>
	<div class="member">

		<span class="name">snap</span>
		<span class="type">Number</span>
		<span class="default">10/25</span>
		<div class="description">
			Proximity snap for graphs or single points. Does not apply to bars, columns
			and pie slices. It defaults to 10 for mouse-powered devices and 25 for touch 
			devices.
		</div>
	</div>
	<div class="member">

		<span class="name">style</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the tooltip. The tooltip can also be styled through the CSS
			class <code>.highcharts-tooltip</code>.
			Default value:
<pre>style: {
	color: '#333333',
	fontSize: '9pt',
	padding: '5px'
}</pre>
		</div>

	</div>
	<div class="member">
		<span class="name">xDateFormat</span>
		<span class="type">String</span>
		<span class="default"></span>
		<div class="description">
			The format for the date in the tooltip header. If data grouping is used, the default is 
			a smart guess based on how close the closest points are. It is pulled from the #plotOptions.dataGrouping.dateTimeLabelFormats
			array. 
		</div>

	</div>
	<div class="member">
		<span class="name">yDecimals</span>
		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">
			How many decimals to show in each series' y value. This is overridable in each series' tooltip options object.
			The default is to preserve all decimals. 
		</div>

	</div>
	<div class="member">
		<span class="name">yPrefix</span>
		<span class="type">String</span>
		<span class="default">""</span>
		<div class="description">
			A string to prepend to each series' y value. Overridable in each series' tooltip options object. 
		</div>

	</div>
	<div class="member">
		<span class="name">ySuffix</span>
		<span class="type">String</span>
		<span class="default">""</span>
		<div class="description">
			A string to append to each series' y value. Overridable in each series' tooltip options object. 
		</div>

	</div>
</div>

<div class="section">
	<h2>credits</h2>
	<div class="section-description">
		Highchart by default puts a credits label in the lower right corner of the chart.
		This can be changed using these options.
	</div>
	<div class="member">
		<span class="name">enabled</span>

		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Whether to show the credits text.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/credits/enabled/">Credits disabled</a>		
		</div>

	</div>
	<div class="member">
		<span class="name">position</span>
		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			Position configuration for the credtis label. Supported properties are 
			<code>align</code>, <code>verticalAlign</code>, <code>x</code> and <code>y</code>.
			Defaults to 

<pre>position: {
	align: 'right',
	x: -10,
	verticalAlign: 'bottom',
	y: -5
}</pre>
		</div>
	</div>
	<div class="member">
		<span class="name">href</span>
		<span class="type">String</span>
		<span class="default">"http://www.highcharts.com"</span>

		<div class="description">
			The URL for the credits label.
		</div>
	</div>
	<div class="member">
		<span class="name">style</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>

		<div class="description">
			CSS styles for the credits label. Defaults to:
<pre>itemStyle: {
	cursor: 'pointer',
	color: '#909090',
	fontSize: '10px'

}</pre>
		</div>
	</div>
	<div class="member">
		<span class="name">text</span>
		<span class="type">String</span>

		<span class="default">"Highcharts.com"</span>
		<div class="description">
			The text for the credits label.
		</div>
	</div>
</div>
<div class="section">
	<h2>global</h2>
	<div class="section-description">

		Global options that don't apply to each chart. These options, like the <code>lang</code>
		options, must be set using the <code>Highcharts.setOptions</code> method.
<pre>Highcharts.setOptions({
	global: {
		useUTC: false
	}
});</pre>
	</div>
	<div class="member">
		<span class="name">useUTC</span>

		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Whether to use UTC time for axis scaling, tickmark placement and time display in 
			<code>Highcharts.dateFormat</code>. Advantages of using UTC is that the time
			displays equally regardless of the user agent's time zone settings. Local time
			can be used when the data is loaded in real time or when correct Daylight Saving Time
			transitions are required.
		</div>
	</div>
	
	
</div>

<div class="section">
	<h2>colors</h2>
	<div class="section-description">
	An array containing the default colors for the chart's series. When all 
	colors are used, new colors are pulled from the start again. Defaults to:
<pre>colors: [
	'#4572A7', 
	'#AA4643', 
	'#89A54E', 
	'#80699B', 
	'#3D96AE', 
	'#DB843D', 
	'#92A8CD', 
	'#A47D7C', 
	'#B5CA92'
]</pre>
	</div>
	<div class="demo">
		<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/colors/base/">Non-default color scheme</a>

	</div>
</div>
<div class="section">
	<h2>symbols</h2>
	<div class="section-description">
	An array containing the default symbols for the series point markers. When all 
	symbols are used, new symbols are pulled from the start again. Defaults to:
<pre>symbols: [
	'circle', 
	'diamond', 
	'square', 
	'triangle', 
	'triangle-down'
]</pre>
	</div>
</div>
<div class="section">

	<h2>lang</h2>
	<div class="section-description">
		Language object. The language object is global and it can't
		be set on each chart initiation. Instead, use <code>Highcharts.setOptions</code> to
		set it before any chart is initiated. 
<pre>Highcharts.setOptions({
	lang: {
		months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 
			'Juillet', 'Ao?t', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
	}
});</pre>
	</div>
	<div class="member">
		<span class="name">decimalPoint</span>

		<span class="type">String</span>
		<span class="default">"."</span>
		<div class="description">
			The default decimal point used in the <code>Highcharts.numberFormat</code> method
			unless otherwise specified in the function arguments.
		</div>
	</div>
	<div class="member">

		<span class="name">downloadPNG</span>
		<span class="type">String</span>
		<span class="default">"Download PNG image"</span>
		<div class="description">
			Exporting module only. The text for the PNG download menu item.
		</div>
	</div>
	<div class="member">

		<span class="name">downloadJPEG</span>
		<span class="type">String</span>
		<span class="default">"Download JPEG image"</span>
		<div class="description">
			Exporting module only. The text for the JPEG download menu item.
		</div>
	</div>
	<div class="member">

		<span class="name">downloadPDF</span>
		<span class="type">String</span>
		<span class="default">"Download PDF document"</span>
		<div class="description">
			Exporting module only. The text for the PDF download menu item.
		</div>
	</div>
	<div class="member">

		<span class="name">downloadSVG</span>
		<span class="type">String</span>
		<span class="default">"Download SVG vector image"</span>
		<div class="description">
			Exporting module only. The text for the SVG download menu item.
		</div>
	</div>
	<div class="member">

		<span class="name">exportButtonTitle</span>
		<span class="type">String</span>
		<span class="default">"Export to raster or vector image"</span>
		<div class="description">
			Exporting module only. The tooltip text for the export button.
		</div>
	</div>
	<div class="member">

		<span class="name">loading</span>
		<span class="type">String</span>
		<span class="default">Loading...</span>
		<div class="description">
			The loading text that appears when the chart is set into the loading state
			following a call to <code>chart.showLoading</code>.
		</div>
	</div>

	<div class="member">
		<span class="name">months</span>
		<span class="type">Array&lt;String&gt;</span>
		<span class="default">['January', 'February', 'March', 'April', 'May', 'June', 'July', 
				'August', 'September', 'October', 'November', 'December']</span>
		<div class="description">
			An array containing the months names.
		</div>

	</div>
	<div class="member">
		<span class="name">shortMonths</span>
		<span class="type">Array&lt;String&gt;</span>
		<span class="default">['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 
				'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</span>
		<div class="description">
			An array containing the months names in abbreviated form. Corresponds to the 
			<code>%b</code> format in <code>Highcharts.dateFormat()</code>. 
		</div>

	</div>
	<div class="member">
		<span class="name">printButtonTitle</span>
		<span class="type">String</span>
		<span class="default">"Print the chart"</span>
		<div class="description">
			Exporting module only. The tooltip text for the print button.
		</div>

	</div>
	<div class="member">
		<span class="name">rangeSelectorFrom</span>
		<span class="type">String</span>
		<span class="default">From</span>
		<div class="description">
			The text for the label for the "from" input box in the range selector
		</div>

	</div>
	<div class="member">
		<span class="name">rangeSelectorTo</span>
		<span class="type">String</span>
		<span class="default">To</span>
		<div class="description">
			The text for the label for the "to" input box in the range selector
		</div>

	</div>
	<div class="member">
		<span class="name">rangeSelectorZoom</span>
		<span class="type">String</span>
		<span class="default">Zoom</span>
		<div class="description">
			The text for the label for the range selector buttons
		</div>

	</div>
	<div class="member">
		<span class="name">resetZoom</span>
		<span class="type">String</span>
		<span class="default">Reset zoom</span>
		<div class="description">
			The text for the label appearing when a chart is zoomed.
		</div>

	</div>
	<div class="member">
		<span class="name">resetZoomTitle</span>
		<span class="type">String</span>
		<span class="default">Reset zoom level 1:1</span>
		<div class="description">
			The tooltip title for the label appearing when a chart is zoomed.
		</div>

	</div>
	<div class="member">
		<span class="name">thousandsSep</span>
		<span class="type">String</span>
		<span class="default">","</span>
		<div class="description">
			The default thousands separator used in the <code>Highcharts.numberFormat</code> method
			unless otherwise specified in the function arguments.
		</div>

	</div>
	<div class="member">
		<span class="name">weekdays</span>
		<span class="type">Array&lt;String&gt;</span>
		<span class="default">['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']</span>
		<div class="description">
			An array containing the weekday names.
		</div>

	</div>
</div>


<div class="section">
	<h2>series</h2>
	<div class="section-description">The actual series to append to the chart. In addition to 
	the members listed below, any member of the <code>plotOptions</code> for that specific
	type of plot can be added to a series individually. For example, even though a general
	<code>lineWidth</code> is specified in <code>plotOptions.series</code>, an individual
	<code>lineWidth</code> can be specified for each series.</div>

	<div class="member">
		<span class="name">data</span>
		<span class="type">Array&lt;Mixed&gt;</span>
		<span class="default">""</span>
		<div class="description">
			An array of data points for the series. The series object is expecting the points to be ordered from low to high. 
			The reason for this is to increase performance. While in many cases the data is fetched from a server, it's also more convenient to sort on the server and thereby save on client resources. 
			 
			The points can be given in three ways:
			<ol>

				<li>A list of numerical values. In this case, the numerical values will 
				be interpreted as y values, and x values will be automatically calculated,
				either starting at 0 and incrementing by 1, or from <code>pointStart</code> 
				and <code>pointInterval</code> given in the plotOptions. Example:
<pre>data: [0, 5, 3, 5]</pre>
				</li>
				<li>A list of arrays with two values. In this case, the first value is the
				x value and the second is the y value. If the first value is a string, it is
				applied as the name of the point, and the x value is incremented following
				the above rules. Example:
<pre>data: [[5, 2], [6, 3], [8, 2]]</pre></li>
				<li>A list of object with named values. In this case the objects are
				point configuration objects as seen under <a class="internal" href="#point">

				options.point</a>. Example:
<pre>data: [{
	name: 'Point 1',
	color: '#00FF00',
	y: 0
}, {
	name: 'Point 2',
	color: '#FF00FF',
	y: 5
}]</pre></li>
			</ol>
			
			In turbo mode, when working with series longer than <a class="internal" href="#plotOptions-series--turboThreshold">
			turboThreshold</a> (1000 points by default), only one- or twodimensional arrays of numbers are allowed. The
			first value is tested, and we assume that all the rest are defined the same
			way.
		</div>
	</div>

	<div class="member">
		<span class="name">name</span>
		<span class="type">String</span>
		<span class="default">""</span>
		<div class="description">
			The name of the series as shown in the legend, tooltip etc.
		</div>
	</div>

	<div class="member">
		<span class="name">stack</span>
		<span class="type">Mixed</span>
		<span class="default">null</span>
		<div class="description">
			This option allows grouping series in a stacked chart. The stack option can be a string 
			or a number or anything else, as long as the grouped series' stack options match each other.
		</div>
	</div>

	<div class="member">
		<span class="name">type</span>
		<span class="type">String</span>
		<span class="default">"line"</span>
		<div class="description">
			The type of series. Can be one of <code>area</code>, <code>areaspline</code>,
			<code>bar</code>, <code>column</code>, <code>line</code>, <code>pie</code>,
			<code>scatter</code>, <code>spline</code>, <code>candlestick</code> or <code>ohlc</code>.
		</div>

	</div>
	<div class="member">
		<span class="name">xAxis</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			When using dual or multiple x axes, this number defines which xAxis the particular
			series is connected to. It refers to the index of the axis in the xAxis array, with 
			0 being the first.
		</div>

	</div>
	<div class="member">
		<span class="name">yAxis</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			When using dual or multiple y axes, this number defines which yAxis the particular
			series is connected to. It refers to the index of the axis in the yAxis array, with 
			0 being the first.
		</div>

	</div>
</div>
<div class="section">
	<h2>point</h2>
	<div class="section-description">
	Config options for the individual point as given in series.data.
	</div>
	
	<div class="member">
		<span class="name">color</span>

		<span class="type">Color</span>
		<span class="default">null</span>
		<div class="description">
			Individual color for the point.
		</div>
	</div>
	<div class="member">
		<span class="name">events</span>

		<span class="type">plotOptions.series.point.events</span>
		<span class="default">null</span>
		<div class="description">
			Individual events for the point.
		</div>
	</div>
	<div class="member">
		<span class="name">id</span>

		<span class="type">String</span>
		<span class="default">null</span>
		<div class="description">
			An id for the point. This can be used after render time to get a pointer
			to the point object through <code>chart.get()</code>.
		</div>
	</div>
	<div class="member">

		<span class="name">marker</span>
		<span class="type">plotOptions.series.marker</span>
		<span class="default">null</span>
		<div class="description">
			An individual point marker for the point.
		</div>
	</div>
	<div class="member">

		<span class="name">name</span>
		<span class="type">String</span>
		<span class="default">""</span>
		<div class="description">
			The name of the point as shown in the legend, tooltip, dataLabel etc.
		</div>
	</div>
	<div class="member">

		<span class="name">x</span>
		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			The x value of the point
		</div>
	</div>
	<div class="member">

		<span class="name">y</span>
		<span class="type">Number</span>
		<span class="default">null</span>
		<div class="description">
			The y value of the point
		</div>
	</div>
</div>

<div class="section">
	<h2>point.events</h2>
	<h4 class="extends">Extends plotOptions.series.point.events</h4>
</div>
<div class="section">
	<h2>point.marker</h2>
	<h4 class="extends">Extends plotOptions.series.marker</h4>
</div>
<!-- Stock charts -->

<div class="section">
	<h2>navigator</h2>
	<div class="section-description">
		The navigator is a small series below the main series, displaying a view of 
		the entire data set. It provides tools to zoom in and out on parts of the
		data as well as panning across the dataset.  
	</div>
	
	<div class="member">
		<span class="name">baseSeries</span>
		<span class="type">Mixed</span>

		<span class="default">0</span>
		<div class="description">
			An integer identifying the index to use for the base series, or a string representing the id of the series.
		</div>
	</div>
	
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>

		<span class="default">true</span>
		<div class="description">
			Enable or disable the navigator
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/navigator/enabled/">Disable the navigator</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">height</span>
		<span class="type">Number</span>
		<span class="default">40</span>
		<div class="description">
			The height of the navigator
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/navigator/height/">A higher navigator</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">margin</span>
		<span class="type">Number</span>
		<span class="default">10</span>

		<div class="description">
			The distance from the nearest element, the X axis or X axis labels
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/navigator/margin/">A margin of 2 draws the
				navigator closer to the X axis labels</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">maskFill</span>

		<span class="type">Color</span>
		<span class="default">rgba(255, 255, 255, 0.75)</span>
		<div class="description">
			The color of the mask covering the areas of the navigator series that are currently
			not visible in the main series. The default color is white with an opacity of 0.75
			to see the series below.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/navigator/maskfill/">Blue, semi transparent mask</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">outlineColor</span>
		<span class="type">Color</span>
		<span class="default">#444</span>
		<div class="description">
			The color of the line marking the currently zoomed area in the navigator
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/navigator/outline/">2px blue outline</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">outlineWidth</span>
		<span class="type">Number</span>

		<span class="default">2</span>
		<div class="description">
			The width of the line marking the currently zoomed area in the navigator
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/navigator/width/">2px blue outline</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">handles</span>
		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			Options for the handles for dragging the zoomed area. Available options are backgroundColor
			and borderColor.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/navigator/handles/">Colored handles</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">series</span>
		<span class="type">Object</span>
		<span class="default"></span>

		<div class="description">
			Options for the navigator series. Available options are the same as any series, documented
			at <a class="internal" href="#plotOptions-series">plotOptions</a> and <a class="internal" href="#series">series</a>.
			Default series options for the navigator series are:
<pre>series: {
	type: 'areaspline',
	color: '#4572A7',
	fillOpacity: 0.4,
	dataGrouping: {
		smoothed: true
	},
	lineWidth: 1,
	marker: {
		enabled: false
	},
	shadow: false
}</pre>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/navigator/series-data/">Using a separate data set for the navigator</a>;
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/navigator/series/">A green navigator series</a>

		</div>
	</div>
	
	<div class="member">
		<span class="name">xAxis</span>
		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			Options for the navigator X axis. Available options are the same as any X axis, documented
			at <a class="internal" href="#xAxis">xAxis</a>.
			Default series options for the navigator xAxis are:

<pre>xAxis: {
	tickWidth: 0,
	lineWidth: 0,
	gridLineWidth: 1,
	tickPixelInterval: 200,
	labels: {
		align: 'left',
		x: 3,
		y: -4
	}
}</pre>
		</div>
	</div>
	
	<div class="member">
		<span class="name">yAxis</span>
		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">

			Options for the navigator Y axis. Available options are the same as any y axis, documented
			at <a class="internal" href="#yAxis">yAxis</a>.
			Default series options for the navigator yAxis are:
<pre>yAxis: {
	gridLineWidth: 0,
	startOnTick: false,
	endOnTick: false,
	minPadding: 0.1,
	maxPadding: 0.1,
	labels: {
		enabled: false
	},
	title: {
		text: null
	},
	tickWidth: 0
}</pre>
		</div>
	</div>
</div>
<div class="section">
	<h2>scrollbar</h2>
	<div class="section-description">

		The scrollbar is a means of panning over the X axis of a chart.
	</div>
	
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Enable or disable the scrollbar
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/enabled/">Disable the scrollbar, only use navigator</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">height</span>
		<span class="type">Number</span>

		<span class="default"></span>
		<div class="description">
			The height of the scrollbar. The height also applies to the width of the scroll arrows so that they
			are always squares. Defaults to 20 for touch devices and 14 for mouse devices.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/height/">A 30px scrollbar</a>
		</div>
	</div>
	
	<div class="member">

		<span class="name">barBackgroundColor</span>
		<span class="type">Color</span>
		<span class="default"></span>
		<div class="description">
			The background color of the scrollbar itself. Defaults to a gray gradient.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>

		</div>
	</div>
	
	<div class="member">
		<span class="name">barBorderRadius</span>
		<span class="type">Number</span>
		<span class="default">2</span>
		<div class="description">

			The border rounding radius of the bar.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">barBorderWidth</span>

		<span class="type">Number</span>
		<span class="default">1</span>
		<div class="description">
			The width of the bar's border.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">barBorderColor</span>
		<span class="type">Color</span>
		<span class="default">#666</span>
		<div class="description">
			The color of the bar's border.
		</div>

	</div>
	
	<div class="member">
		<span class="name">buttonArrowColor</span>
		<span class="type">Color</span>
		<span class="default">#666</span>
		<div class="description">
			The color of the small arrow inside the scrollbar buttons
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">buttonBackgroundColor</span>
		<span class="type">Color</span>

		<span class="default"></span>
		<div class="description">
			The color of scrollbar buttons. Defaults to a gray gradient.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>
		</div>
	</div>
	
	<div class="member">

		<span class="name">buttonBorderColor</span>
		<span class="type">Color</span>
		<span class="default">#666</span>
		<div class="description">
			The color of the border of the scrollbar buttons.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>

		</div>
	</div>
	
	<div class="member">
		<span class="name">buttonBorderRadius</span>
		<span class="type">Number</span>
		<span class="default">2</span>
		<div class="description">

			The corner radius of the scrollbar buttons.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">buttonBorderWidth</span>

		<span class="type">Number</span>
		<span class="default">1</span>
		<div class="description">
			The border width of the scrollbar buttons.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">rifleColor</span>
		<span class="type">Color</span>
		<span class="default">#666</span>
		<div class="description">
			The color of the small rifles in the middle of the scrollbar.
		</div>

	</div>
	
	<div class="member">
		<span class="name">trackBackgroundColor</span>
		<span class="type">Color</span>
		<span class="default"></span>
		<div class="description">
			The color of the track background. The default is a gray gradient. 
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">trackBackgroundColor</span>
		<span class="type">Color</span>

		<span class="default"></span>
		<div class="description">
			The color of the track background. The default is a gray gradient. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>
		</div>
	</div>
	
	<div class="member">

		<span class="name">trackBorderColor</span>
		<span class="type">#CCC</span>
		<span class="default"></span>
		<div class="description">
			The color of the border of the scrollbar track. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>

		</div>
	</div>
	
	<div class="member">
		<span class="name">trackBorderWidth</span>
		<span class="type">#CCC</span>
		<span class="default">1</span>
		<div class="description">

			The width of the border of the scrollbar track. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">trackBorderRadius</span>

		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The corner radius of the border of the scrollbar track. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/scrollbar/style/">Scrollbar styling</a>
		</div>

	</div>
</div>
<div class="section">
	<h2>rangeSelector</h2>
	<div class="section-description">
		The range selector is a tool for selecting ranges to display within the chart. It provides
		buttons to select preconfigured ranges in the chart, like 1 day, 1 week, 1 month etc. It
		also provides input boxes where min and max dates can be manually input. 
	</div>
	
	<div class="member">
		<span class="name">buttons</span>

		<span class="type">Array</span>
		<span class="default"></span>
		<div class="description">
			An array of configuration objects for the buttons. The individual options for each item are:
			
			<dl>
				<dt><code>type</code></dt>
				<dd>Defines the timespan, can be one of 'millisecond', 'second', 'minute', 'day', 'week', 
					'month', 'ytd' (year to date), 'year' and 'all'.</dd>
				<dt><code>count</code></dt>

				<dd>Defines how many units of the defined type to use.</dd>
				<dt><code>text</code></dt>
				<dd>The text for the button itself</dd>
			</dl>
					Defaults to 
<pre>buttons: [{
	type: 'month',
	count: 1,
	text: '1m'
}, {
	type: 'month',
	count: 3,
	text: '3m'
}, {
	type: 'month',
	count: 6,
	text: '6m'
}, {
	type: 'ytd',
	text: 'YTD'
}, {
	type: 'year',
	count: 1,
	text: '1y'
}, {
	type: 'all',
	text: 'All'
}]</pre>
		</div>

	</div>
	
	<div class="member">
		<span class="name">buttonSpacing</span>
		<span class="type">Number</span>
		<span class="default">0</span>
		<div class="description">
			The space in pixels between the buttons in the range selector.
		</div>

	</div>
	
	<div class="member">
		<span class="name">buttonTheme</span>
		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			A collection of attributes for the buttons. The object takes SVG attributes like <code>fill</code>,
			<code>stroke</code>, <code>stroke-width</code>, as well as <code>style</code>, a collection of CSS
			properties for the text.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/rangeselector/styling/">Styling the buttons and inputs</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>

		<span class="default">true</span>
		<div class="description">
			Enable or disable the range selector
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/rangeselector/enabled/">Disable the range selector</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">inputBoxStyle</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS for the container DIV holding the input boxes. Use <code>right</code> and <code>top</code> for positioning, 
			alternatively set <code>right</code> and <code>top</code> to <code>'auto'</code> and set <code>left</code>

			or <code>bottom</code> instead.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/rangeselector/inputboxstyle/">Styling the buttons and inputs</a>
		</div>
	</div>
	
	<div class="member">

		<span class="name">inputDateFormat</span>
		<span class="type">String</span>
		<span class="default">%b %e, %Y</span>
		<div class="description">
			The date format in the input boxes when not selected for editing.
		</div>
	</div>
	
	<div class="member">

		<span class="name">inputEditDateFormat</span>
		<span class="type">String</span>
		<span class="default">%Y-%m-%d</span>
		<div class="description">
			The date format in the input boxes when they are selected for editing. This must be a format that
			is recognized by JavaScript Date.parse.
		</div>
	</div>
	
	<div class="member">

		<span class="name">inputEnabled</span>
		<span class="type">Boolean</span>
		<span class="default"></span>
		<div class="description">
			Enable or disable the date input boxes.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/rangeselector/input-datepicker/">

				Extending the input with a jQuery UI datepicker</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">inputStyle</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>

		<div class="description">
			CSS for the HTML inputs in the range selector.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/rangeselector/styling/">Styling the buttons and inputs</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">labelStyle</span>

		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the labels - the Zoom, From and To texts.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/rangeselector/styling/">Styling the buttons and inputs</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">selected</span>
		<span class="type">Number</span>
		<span class="default">undefined</span>
		<div class="description">
			The index of the button to appear pre-selected.
		</div>

	</div>
</div>

<!-- Exporting module -->



<!-- The navigation section -->
<div class="section">
	<h2>navigation</h2>
	<div class="section-description">
		A collection of options for buttons and menus appearing in the exporting module.
	</div>

	
	<div class="member">
		<span class="name">menuStyle</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the popup menu appearing by default when the export icon is
			clicked. This menu is rendered in HTML. Defaults to 
<pre>menuStyle: {
	border: '1px solid #A0A0A0',
	background: '#FFFFFF'
}</pre>
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/1/">Light gray menu background</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">menuItemStyle</span>
		<span class="type">CSSObject</span>

		<span class="default"></span>
		<div class="description">
			CSS styles for the individual items within the popup menu appearing by 
			default when the export icon is
			clicked. The menu items are rendered in HTML. Defaults to 
<pre>menuItemStyle: {
	padding: '0 5px',
	background: NONE,
	color: '#303030'
}</pre>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/2/">Add a grey stripe to the left</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">menuItemHoverStyle</span>
		<span class="type">CSSObject</span>
		<span class="default"></span>
		<div class="description">
			CSS styles for the hover state of the individual items within the popup menu appearing by 
			default when the export icon is
			clicked. The menu items are rendered in HTML. Defaults to 
<pre>menuItemHoverStyle: {
	background: '#4572A5',
	color: '#FFFFFF'
}</pre>

		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/3/">Bold text on hover</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">buttonOptions</span>
		<span class="type">navigation.buttonOptions</span>

		<span class="default"></span>
		<div class="description">
			General options for buttons like the Print and Export buttons.
		</div>
	</div>
</div>


<div class="section">
	<h2>navigation.buttonOptions</h2>
	<div class="section-description">

		A collection of options for buttons appearing in the exporting module.
	</div>
	
	<div class="member">
		<span class="name">align</span>
		<span class="type">String</span>
		<span class="default">"right"</span>
		<div class="description">
			Alignment for the buttons.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/4/">Center aligned</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">backgroundColor</span>
		<span class="type">Color</span>

		<span class="default"></span>
		<div class="description">
			Background color or gradient for the buttons. Defaults to 
<pre>backgroundColor: {
	linearGradient: [0, 0, 0, 20],
	stops: [
		[0.4, '#F7F7F7'],
		[0.6, '#E3E3E3']
	]
}</pre>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/6/">White buttons</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">borderColor</span>
		<span class="type">String</span>
		<span class="default">"#B0B0B0"</span>
		<div class="description">
			The border color of the buttons
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/7/">Blue border</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">borderRadius</span>
		<span class="type">Number</span>

		<span class="default">3</span>
		<div class="description">
			The border corner radius of the buttons
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/8/">Square buttons</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">borderWidth</span>
		<span class="type">Number</span>
		<span class="default">1</span>
		<div class="description">
			The border width of the buttons
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/fXHB5/9/">2px border</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>

		<div class="description">
			Whether to enable buttons
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/10/">Exporting module loaded but buttons disabled</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">height</span>

		<span class="type">Number</span>
		<span class="default">20</span>
		<div class="description">
			Pixel height of the buttons
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/11/">Bigger buttons</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">hoverBorderColor</span>
		<span class="type">String</span>
		<span class="default">#909090</span>
		<div class="description">
			Color of the button border on hover
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/12/">Blue border on hover</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">hoverSymbolFill</span>
		<span class="type">String</span>

		<span class="default">#81A7CF</span>
		<div class="description">
			Fill color for the symbol within the button on hover
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/13/">Blue symbol fill on hover</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">hoverSymbolStroke</span>
		<span class="type">String</span>
		<span class="default">#4572A5</span>
		<div class="description">
			Stroke (line) color for the symbol within the button on hover
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/fXHB5/14/">Blue symbol stroke on hover</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">symbolFill</span>
		<span class="type">String</span>
		<span class="default">#E0E0E0</span>

		<div class="description">
			Fill color for the symbol within the button
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/15/">Blue symbol stroke for one of the buttons</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">symbolSize</span>

		<span class="type">Number</span>
		<span class="default">12</span>
		<div class="description">
			The pixel size of the symbol on the button
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/11/">Bigger buttons</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">symbolStroke</span>
		<span class="type">String</span>
		<span class="default">"#A0A0A0"</span>
		<div class="description">
			The color of the symbol's stroke or line
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/16/">Blue symbol stroke</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">symbolStrokeWidth</span>
		<span class="type">Number</span>

		<span class="default">1</span>
		<div class="description">
			The pixel stroke width of the symbol on the button
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/11/">Bigger buttons</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">symbolX</span>
		<span class="type">Number</span>
		<span class="default">11.5</span>
		<div class="description">
			The x position of the center of the symbol inside the button.
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/fXHB5/11/">Bigger buttons</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">symbolY</span>
		<span class="type">Number</span>
		<span class="default">10.5</span>

		<div class="description">
			The y position of the center of the symbol inside the button.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/11/">Bigger buttons</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">verticalAlign</span>

		<span class="type">String</span>
		<span class="default">"top"</span>
		<div class="description">
			The vertical alignment of the buttons. Can be one of "top", "middle" or
			"bottom". 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/17/">Buttons at lower right</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">width</span>
		<span class="type">Number</span>
		<span class="default">24</span>
		<div class="description">
			The pixel width of the button
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/11/">Bigger buttons</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">verticalAlign</span>
		<span class="type">String</span>

		<span class="default">"top"</span>
		<div class="description">
			The vertical alignment of the buttons. Can be one of "top", "middle" or
			"bottom". 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/17/">Buttons at lower right</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>
		<span class="default">10</span>
		<div class="description">
			The vertical offset of the button's position relative to its <code>verticalAlign</code>.			 
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/17/">Buttons at lower right</a>
		</div>
	</div>
</div>

<!-- The exporting session -->
<div class="section">
	<h2>exporting</h2>
	<div class="section-description">

		Options for the exporting module.
	</div>
	
	<div class="member">
		<span class="name">buttons</span>
		<span class="type">exporting.buttons</span>
		<span class="default"></span>
		<div class="description">
			Configuration options for the buttons associated with the exporting module.
		</div>

	</div>
	
	<div class="member">
		<span class="name">enabled</span>
		<span class="type">Boolean</span>
		<span class="default">true</span>
		<div class="description">
			Whether to enable the exporting module.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/18/">Exporting module is loaded but disabled</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">filename</span>
		<span class="type">string</span>

		<span class="default">"chart"</span>
		<div class="description">
			The filename, without extension, to use for the exported chart.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/26/">Custom file name</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">type</span>
		<span class="type">String</span>
		<span class="default">"image/png"</span>
		<div class="description">
			Default MIME type for exporting if <code>chart.exportChart()</code> is called
			without specifying a <code>type</code> option. Possible values are <code>image/png</code>,
			<code>image/jpeg</code>, <code>application/pdf</code> and <code>image/svg+xml</code>.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/20/">Default type set to <code>image/jpeg</code></a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">url</span>
		<span class="type">String</span>

		<span class="default">http://export.highcharts.com</span>
		<div class="description">
			The URL for the server module converting the SVG string to an image format. By
			default this points to Highslide Software's free web service. 
		</div>
	</div>
	
	<div class="member">
		<span class="name">width</span>
		<span class="type">Number</span>

		<span class="default">800</span>
		<div class="description">
			The pixel width of charts exported to PNG or JPG.  
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/21/">Export to 200px wide images</a>
		</div>
	</div>

</div>

<div class="section">
	<h2>exporting.buttons</h2>
	<div class="section-description">
		Options for the export related buttons, print and export.
	</div>
	
	<div class="member">
		<span class="name">exportButton</span>
		<span class="type">exporting.buttons.exportButton</span>

		<span class="default"></span>
		<div class="description">
			Options for the export button.
		</div>
	</div>
	<div class="member">
		<span class="name">printButton</span>
		<span class="type">exporting.buttons.printButton</span>

		<span class="default"></span>
		<div class="description">
			Options for the print button.
		</div>
	</div>
</div>

<div class="section">
	<h2>exporting.buttons.exportButton</h2>
	<h4 class="extends">Extends navigation.buttonOptions</h4>

	<div class="section-description">
		Options for the export button.
	</div>
	
	<div class="member">
		<span class="name">hoverSymbolFill</span>
		<span class="type">String</span>
		<span class="default">#768F3E</span>
		<div class="description">

			See <a class="internal" href="#navigation-buttonOptions">navigation.buttonOptions</a>
			=> hoverSymbolFill.
		</div>
	</div>
	
	<div class="member">
		<span class="name">onclick</span>
		<span class="type">Function</span>

		<span class="default"></span>
		<div class="description">
			A click handler callback to use on the button directly instead of the popup menu.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/23/">Skip the menu and export the chart directly</a>
		</div>
	</div>
	
	<div class="member">

		<span class="name">menuItems</span>
		<span class="type">Array&lt;Object&gt;</span>
		<span class="default"></span>
		<div class="description">
			<p>A collection of config options for the menu items. Each options object consists
			of a <code>text</code> option which is a string to show in the menu item, as
			well as an <code>onclick</code> parameter which is a callback function to run
			on click.</p>

			<p>By default, there is one menu item for each of the available export types.
			Menu items can be customized by defining a new array of items and assigning 
			<code>null</code> to unwanted positions (see override example below).</p>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/23/">Skip the menu and export the chart directly</a>,
			<a href="http://jsfiddle.net/fXHB5/24/">override the menu items</a>			
		</div>
	</div>

	
	<div class="member">
		<span class="name">symbol</span>
		<span class="type">String</span>
		<span class="default">"exportIcon"</span>
		<div class="description">
			The symbol for the button. Points to a definition function in the 
			<code>Highcharts.Renderer.symbols</code> collection. The default
			<code>exportIcon</code> function is part of the exporting module.
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/22/">Use a circle for symbol</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">symbolFill</span>
		<span class="type">String</span>

		<span class="default">#A8BF77</span>
		<div class="description">
			See <a class="internal" href="#navigation-buttonOptions">navigation.buttonOptions</a>
			=> symbolFill.
		</div>
	</div>
	
	<div class="member">
		<span class="name">x</span>

		<span class="type">Number</span>
		<span class="default">10</span>
		<div class="description">
			The horizontal positioin of the button relative to the <code>align</code>
			option. 
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/fXHB5/11/">Bigger buttons</a>
		</div>
	</div>
</div>



<div class="section">
	<h2>exporting.buttons.printButton</h2>
	<h4 class="extends">Extends navigation.buttonOptions</h4>

	<div class="section-description">
		Options for the print button.
	</div>
	
	<div class="member">
		<span class="name">hoverSymbolFill</span>
		<span class="type">String</span>
		<span class="default">#779ABF</span>
		<div class="description">

			See <a class="internal" href="#navigation-buttonOptions">navigation.buttonOptions</a>
			=> hoverSymbolFill.
		</div>
	</div>
	
	<div class="member">
		<span class="name">onclick</span>
		<span class="type">Function</span>

		<span class="default"></span>
		<div class="description">
			A click handler callback to use on the button directly. By default this onclick calls
			<code>chart.print()</code>, but it can be overridden to do other actions.
		</div>
	</div>
	
	<div class="member">
		<span class="name">symbol</span>
		<span class="type">String</span>

		<span class="default">"printIcon"</span>
		<div class="description">
			The symbol for the button. Points to a definition function in the 
			<code>Highcharts.Renderer.symbols</code> collection. The default
			<code>print</code> function is part of the exporting module.
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/22/">Use a circle for symbol for the export button</a>

		</div>
	</div>
	
	<div class="member">
		<span class="name">symbolFill</span>
		<span class="type">String</span>
		<span class="default">#B5C9DF</span>
		<div class="description">

			See <a class="internal" href="#navigation-buttonOptions">navigation.buttonOptions</a>
			=> symbolFill.
		</div>
	</div>
	
	<div class="member">
		<span class="name">x</span>
		<span class="type">Number</span>

		<span class="default">-36</span>
		<div class="description">
			The horizontal positioin of the button relative to the <code>align</code>
			option. 
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/11/">Bigger buttons</a>

		</div>
	</div>
</div>

<div class="class-item" id="highcharts-object">
	<h2>The Highcharts Namespace</h2>
	<div class="section-description">
		<p>The namespace under which all other Highcharts variables are assembled is called 
		<code>Highcharts</code>. </p>

<pre>var chart1 = new Highcharts.Chart(options);</pre>
	</div>
	
	<h3>Methods</h3>
	<div class="member">
		<span class="name">Chart</span>
		<span class="parameters">(Object options, Function callback)</span>
		<span class="type">Chart</span>

		<div class="description">
			<p>This is the constructor for creating a new basic chart object (not Stock chart).</p>
<pre>var chart1 = new Highcharts.Chart(options);</pre>
			<h4>Parameters</h4>
			<ul>
				<li>
					options: Object<br/>

					The chart options, as documented under the heading "The options object"
					in the left menu.
				</li>
				<li>
					callback: Function<br/>
					A function to execute when the chart object is finished loading and rendering. In 
					most cases the chart is built in one thread, but in Internet Explorer version 8 or less
					the chart is sometimes initiated before the document is ready, and in these
					cases the <code>chart</code> object will not be finished directly after calling
					<code>new Highcharts.Chart()</code>. As a consequence, code that relies on the 
					newly built Chart object should always run in the callback. Defining a <code>
					chart.event.load</code> handler is equivalent.
				</li>

			</ul>
			<h4>Returns</h4>
			<ul>
				<li>A reference to the created <code>Chart</code> object.</li>
			</ul>
		</div>

	</div>
	<div class="member">
		<span class="name">dateFormat</span>
		<span class="parameters">(String format, [Number time], [Boolean capitalize])</span>
		<span class="type">String</span>
		<div class="description">
			<p>Formats a JavaScript date timestamp (milliseconds since Jan 1st 1970) 
			into a human readable date string. The format is a subset of the formats 
			for <a href="http://php.net/manual/en/function.strftime.php">PHP's strftime 
			function</a>.</p>

			<p>Currently these formats are supported:</p>
			<ul>
				<li>%a: Short weekday, like 'Mon'.</li>
				
				<li>%A: Long weekday, like 'Monday'.</li>
				<li>%d: Two digit day of the month, 01 to 31.</li>
				<li>%e: Day of the month, 1 through 31. </li>

				<li>%b: Short month, like 'Jan'.</li>
				<li>%B: Long month, like 'January'.</li>
				<li>%m: Two digit month number, 01 through 12. </li>
				<li>%y: Two digits year, like 09 for 2009.</li>
				<li>%Y: Four digits year, like 2009.</li>
				<li>%H: Two digits hours in 24h format, 00 through 23.</li>

				
				<li>%I: Two digits hours in 12h format, 00 through 11.</li>
				<li>%l (Lower case L): Hours in 12h format, 1 through 11.</li>
				<li>%M: Two digits minutes, 00 through 59.</li>
				<li>%p: Upper case AM or PM.</li>
				<li>%P: Lower case AM or PM.</li>
				<li>%S: Two digits seconds, 00 through 59</li>

			</ul>
<pre>tooltip: {
   formatter: function() {
      return '&lt;strong&gt;'+ this.series.name +'&lt;/strong&gt;'+
         Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y +' m/s';
   }
}, ...  </pre>
			
			<h4>Parameters</h4>
			<ul>
				<li>
					format: String<br/>

					A string containing some of the formats above.
				</li>
				<li>
					time: Number<br/>
					The JavaScript time to format.
				</li>
				<li>
					capitalize: Boolean<br/>
					Whether to capitalize words in the return string.
				</li>

			</ul>
			<h4>Returns</h4>
			<ul>
				<li>A string with any format symbol replaced.</li>
			</ul>
		</div>
	</div>
	
	<div class="member">

		<span class="name">numberFormat</span>
		<span class="parameters">(Number number, [Number decimals], [String decimalPoint], [String thousandsSep])</span>
		<span class="type">String</span>
		<div class="description">
			<p>Formats a JavaScript number with grouped thousands, a fixed amount of 
			decimals and an optional decimal point. It is a port of PHP's function with 
			the same name. See <a href="http://php.net/manual/en/function.number-format.php">
			PHP number_format</a> for a full explanation of the parameters.</p>

<pre>tooltip: {
   formatter: function() {
      return '<strong>'+ this.series.name +'</strong>'+
         this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' millions';
   }
}, ...</pre>
			
			<h4>Parameters</h4>
			<ul>
				<li>
					number: Number<br/>
					The raw number to format.
				</li>

				<li>
					decimals: Number<br/>
					The desired number of decimals.
				</li>
				<li>
					decimalPoint: String<br/>
					The decimal point. Defaults to "." or to the string specified globally in 
					options.lang.decimalPoint.
				</li>
				<li>

					thousandsSep: String<br/>
					The thousands separator. Defaults to "," or to the string specified globally
					in options.lang.thousandsSep.
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>
				<li>A string with with the input number formatted.</li>
			</ul>

		</div>
	</div>
	
	
	
	<div class="member">
		<span class="name">setOptions</span>
		<span class="parameters">(Object options)</span>
		<span class="type">Object</span>
		<div class="description">

			<p>Sets the options globally for all charts created after this has been called. 
			Takes an options JavaScript object structure as the argument. These options are 
			merged with the default options and the result is returned.</p>		
			<h4>Parameters</h4>
			<ul>
				<li>
					options: Object<br/>
					The chart configuration object. 
				</li>
			</ul>

			<h4>Returns</h4>
			<ul>
				<li>The new options, a merge between the default options and the user set options.</li>
			</ul>
		</div>
	</div>
	
	<div class="member member-last">
		<span class="name">StockChart</span>

		<span class="parameters">(Object options, Function callback)</span>
		<span class="type">Chart</span>
		<div class="description">
			<p>This is the constructor for creating a new stock chart object. Basically a stock chart object is 
				the same as a Chart object with some different default options.</p>
<pre>var chart1 = new Highcharts.StockChart(options);</pre>
			<h4>Parameters</h4>
			<ul>

				<li>
					options: Object<br/>
					The chart options, as documented under the heading "The options object"
					in the left menu.
				</li>
				<li>
					callback: Function<br/>
					A function to execute when the chart object is finished loading and rendering. In 
					most cases the chart is built in one thread, but in Internet Explorer version 8 or less
					the chart is sometimes initiated before the document is ready, and in these
					cases the <code>chart</code> object will not be finished directly after calling
					<code>new Highcharts.Chart()</code>. As a consequence, code that relies on the 
					newly built Chart object should always run in the callback. Defining a <code>

					chart.event.load</code> handler is equivalent.
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>
				<li>A reference to the created <code>Chart</code> object.</li>

			</ul>
		</div>
	</div>
	
</div>


<div class="class-item" id="renderer">
	<h2>Highcharts.Renderer</h2>
	<div class="section-description">
		<p>Allows direct access to the Highcharts rendering layer in order to draw primitive shapes like circles, rectangles,
		paths or text directly on a chart, or independent from any chart. The Renderer represents a wrapper object for SVG
		in modern browsers and VML in IE < 8.</p>

		
		<p>An existing chart's renderer can be accessed through <code>chart.renderer</code>. To create a renderer independent
		from a chart, use <code>var renderer = new Highcharts.Renderer(parentNode, width, height);</code> where parentNode
		is the HTML element where you want to add it.</p>
		
		<p>The Renderer's methods are chained whereever possible, so you can initiate an element then call for example <code>attr</code>
		and <code>css</code> and <code>add</code> on that element in one statement.</p>

		
		
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/udw6d/">Annotating a chart programmatically</a>,
			<a href="http://jsfiddle.net/highcharts/Y8aeS/">independent SVG/VML drawing</a>
		</div>
	</div>
	
	
	<div class="member">
		<span class="name">arc</span>
		<span class="parameters">(Number centerX, Number centerY, Number outerRadius, Number innerRadius, Number start, Number end)</span>

		<span class="type">Element</span>
		<div class="description">
			<p>Draw an arc on the renderer canvas.</p>
			<h4>Parameters</h4>
			<ul>
				<li>
					centerX: Number<br/>

					The x position of the arc's center in the SVG element.
				</li>
				<li>
					centerY: Number<br/>
					The y position of the arc's center in the SVG element.
				</li>
				<li>
					outerRadius: Number<br/>
					The outer radius of the arc.
				</li>

				<li>
					innerRadius: Number<br/>
					The inner radius of the arc.
				</li>
				<li>
					start: Number<br/>
					The starting angle of the arc in radians, where 0 is to the right and -Math.PI/2 is up.
				</li>
				<li>

					end: Number<br/>
					The ending angle of the arc in radians, where 0 is to the right and -Math.PI/2 is up.
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>
				<li>An Element object.</li>
			</ul>

		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/thv9g/">Drawing an arc</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">circle</span>
		<span class="parameters">(Number centerX, Number centerY, Number radius)</span>

		<span class="type">Element</span>
		<div class="description">
			<p>Draw circle on the renderer canvas.</p>
			<h4>Parameters</h4>
			<ul>
				<li>
					centerX: Number<br/>

					The x position of the circle's center in the SVG element.
				</li>
				<li>
					centerY: Number<br/>
					The y position of the circle's center in the SVG element.
				</li>
				<li>
					radius: Number<br/>
					The radius of the circle.
				</li>

			</ul>
			<h4>Returns</h4>
			<ul>
				<li>An Element object.</li>
			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/SKe3B/">Drawing a circle</a>

		</div>
	</div>
	
	<div class="member">
		<span class="name">g</span>
		<span class="parameters">(String name)</span>
		<span class="type">Element</span>
		<div class="description">

			<p>Add an SVG/VML group.</p>
			<h4>Parameters</h4>
			<ul>
				<li>
					name: String<br/>
					The name of the group. This will be used in the class name, which will be 
					<code>"highcharts-"+ name</code>. Other Element objects are added to 
					the group by using the group as the first parameter in .add() for the
					wrappers.
				</li>

			</ul>
			<h4>Returns</h4>
			<ul>
				<li>An Element object.</li>
			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/CJ5P7/">Show and hide grouped objects</a>

		</div>
	</div>
	
	<div class="member">
		<span class="name">image</span>
		<span class="parameters">(String source, Number x, Number y, Number width, Number height)</span>
		<span class="type">Element</span>
		<div class="description">

			<p>Add an image from an external resource.</p>
			<h4>Parameters</h4>
			<ul>
				<li>
					source: String<br/>
					The URL of the image.
				</li>
				<li>

					x: String<br/>
					The x position of the image's upper left corner.
				</li>
				<li>
					y: String<br/>
					The y position of the image's upper left corner.
				</li>
				<li>
					width: String<br/>

					The width of the image.
				</li>
				<li>
					height: String<br/>
					The height of the image.
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>

				<li>An Element object.</li>
			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/F4qS8/">Add an image in a chart</a>,
			<a href="http://jsfiddle.net/highcharts/ufUmg/">add an image independent from chart</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">path</span>
		<span class="parameters">(Array path)</span>
		<span class="type">Element</span>
		<div class="description">
			<p>Add a path based on <a href="http://www.w3.org/TR/SVG/paths.html">SVG's path commands</a>. In SVG
			capable browsers all path commands are supported, but in VML only a subset is supported, most notably 
			moveTo, lineTo and curve commands.</p>

			<h4>Parameters</h4>
			<ul>
				<li>
					path: Array<br/>
					An SVG path split up in array form.
				</li>
			</ul>
			<h4>Returns</h4>

			<ul>
				<li>An Element object.</li>
			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/MQ5yq/">Draw a path in a chart</a>,
			<a href="http://jsfiddle.net/highcharts/bMZAL/">draw a path independent from a chart</a>
		</div>

	</div>
	
	<div class="member">
		<span class="name">rect</span>
		<span class="parameters">(Number x, Number y, Number width, Number height, Number cornerRadius)</span>
		<span class="type">Element</span>
		<div class="description">
			<p>Add a rectangle.</p>

			<h4>Parameters</h4>
			<ul>
				<li>
					x: Number<br/>
					The x position of the rectangle's upper left corner.
				</li>
				<li>
					y: Number<br/>

					The y position of the rectangle's upper left corner.
				</li>
				<li>
					width: Number<br/>
					The width of the rectangle.
				</li>
				<li>
					height: Number<br/>
					The height of the rectangle.
				</li>

				<li>
					cornerRadius: Number<br/>
					The corner radius of all the rectangle's corners.
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>
				<li>An Element object.</li>

			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/mqz3N/">Draw a rectangle in a chart</a>,
			<a href="http://jsfiddle.net/highcharts/MjBJb/">draw a rectangle independent from a chart</a>
		</div>
	</div>
	
	<div class="member member-last">

		<span class="name">text</span>
		<span class="parameters">(String str, Number x, Number y)</span>
		<span class="type">Element</span>
		<div class="description">
			<p>Draw text. The text can contain a subset of HTML, like spans and anchors and some basic text styling
			of these.</p>
			<h4>Parameters</h4>

			<ul>
				<li>
					str: String<br/>
					The text or HTML to draw
				</li>
				<li>
					x: Number<br/>
					The x position of the text's lower left corner.
				</li>

				<li>
					y: Number<br/>
					The y position of the text's lower left corner.
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>
				<li>An Element object.</li>

			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/KvgV7/">Annotate the chart freely</a>;
			<a href="http://jsfiddle.net/highcharts/udw6d/">annotate with a border and in response to the data</a>;
			<a href="http://jsfiddle.net/highcharts/JLcUv/">formatted text</a>.
		</div>
	</div>
	

</div>

<div class="class-item" id="element">
	<h2>The Element object</h2>
	<div class="section-description">
		<p>The Element class is a JavaScript wrapper for SVG elements used in the rendering layer of Highchart. Combined
		with the Renderer object, these elements allows freeform annotation in the charts or even in your HTML 
		pages without creating a chart at all.</p>		
	</div>
	
	
	<div class="member">
		<span class="name">add</span>

		<span class="parameters">[(Object parent)]</span>
		<span class="type">Element</span>
		<div class="description">
			<p>Add the element to the renderer canvas.</p>
			<h4>Parameters</h4>
			<ul>
				<li>

					parent: Object<br/>
					The element can be added to a <code>g</code> (group) element.
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>
				<li>An Element object.</li>

			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/CJ5P7/">Elements added to a group</a>
		</div>
	</div>
	
	
	<div class="member">
		<span class="name">attr</span>

		<span class="parameters">Object hash</span>
		<span class="type">Element</span>
		<div class="description">
			<p>Apply attributes to the SVG/VML elements. These attributes for the most parts correspond
			to SVG, but some are specific to Highcharts, like <code>zIndex</code> and <code>rotation</code>
			for text.</p>

			
			<h4>Most important available attributes:</h4>
			<dl>
				<dt>d</dt>
				<dd>The path definition for a <code>path</code> element.</dd>
				
				<dt>end</dt>

				<dd>The end position of an arc.</dd>
				
				<dt>fill</dt>
				<dd>The fill or background color of a shape.</dd>
				
				<dt>height</dt>
				<dd>The height of rectangle elements.</dd>
				
				<dt>r</dt>

				<dd>The radius of an arc or circle.</dd>
				
				<dt>rotation</dt>
				<dd>The rotation of a text element.</dd>
				
				<dt>start</dt>
				<dd>The start position of an arc.</dd>
				
				<dt>stroke</dt>

				<dd>The stroke or border color of an element.</dd>
				
				<dt>stroke-width</dt>
				<dd>The stroke or border width of an element.</dd>
				
				<dt>style</dt>
				<dd>A serialized CSS string.</dd>
				
				<dt>text</dt>

				<dd>The text string of a text element.</dd>
				
				<dt>translateX</dt>
				<dd>The x translation of an element.</dd>
				
				<dt>translateY</dt>
				<dd>The Y translation of an element.</dd>
				
				<dt>visibility</dt>

				<dd>The visibility of the element. Can be 'visible' or 'hidden'.</dd>
				
				<dt>width</dt>
				<dd>The width of rectangle elements.</dd>
				
				<dt>x</dt>
				<dd>The x position of supported elements.</dd>
				
				<dt>y</dt>

				<dd>The y position of supported elements.</dd>
				
				<dt>zIndex</dt>
				<dd>The z index or vertical stacking of an element..</dd>
			</dl>
			
			
			<h4>Parameters</h4>
			<ul>
				<li>

					hash: Object<br/>
					A set of attributes to apply. 
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>
				<li>An Element object.</li>
			</ul>

		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/MjBJb/">Setting some attributes</a>
		</div>
	</div>
	
	
	
	<div class="member">
		<span class="name">css</span>
		<span class="parameters">(Object hash)</span>

		<span class="type">Element</span>
		<div class="description">
			<p>Apply some CSS properties to the element</p>
			<h4>Parameters</h4>
			<ul>
				<li>
					hash: Object<br/>

					The object literal of CSS properties to apply. Properties should be hyphenated, 
					not camelCased.
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>
				<li>An Element object.</li>
			</ul>
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/KvgV7/">Styled text</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">destroy</span>
		<span class="parameters"></span>
		<span class="type">null</span>

		<div class="description">
			<p>Destroy the element and free up memory</p>
			<h4>Returns</h4>
			<ul>
				<li>null</li>
			</ul>
		</div>

	</div>
	
	
	<div class="member">
		<span class="name">getBBox</span>
		<span class="parameters"></span>
		<span class="type">Element</span>
		<div class="description">
			<p>Get the bounding box of the element</p>

			<h4>Returns</h4>
			<ul>
				<li>A hash object containing x, y, width and height values for the element.</li>
			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/udw6d/">Draw a rectangle based on a text's bounding box</a>.
		</div>

	</div>
	
	<div class="member">
		<span class="name">on</span>
		<span class="parameters">(String eventType, Function handler)</span>
		<span class="type">Element</span>
		<div class="description">
			<p>Apply an event handler to the element</p>

			<h4>Parameters</h4>
			<ul>
				<li>
					eventType: String<br/>
					The event type to attach, for example 'click', 'mouseover', 'touch'.
				</li>
				<li>
					handler: Function<br/>

					The event handler function.
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>
				<li>The element object</li>
			</ul>
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/gvr83/">A clickable rectangle</a>.
		</div>
	</div>
	
	<div class="member member-last">
		<span class="name">toFront</span>
		<span class="parameters"></span>
		<span class="type">Element</span>

		<div class="description">
			<p>Bring the element to the front. Alternatively, a zIndex attribute can be given.</p>
			<h4>Returns</h4>
			<ul>
				<li>The element object</li>
			</ul>
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/highcharts/Tnjtp/">Click an element to bring it to front</a>.
		</div>
	</div>
</div>

<div class="class-item" id="chart-object">
	<h2>The Chart object</h2>
	<div class="section-description">
		<p>The chart object is the JavaScript object representing a single chart in the web page.
		The pointer to your chart object is returned when a chart is created using 
		the <code>Highcharts.Chart()</code> constructor:</p>

<pre>var chart1 = new Highcharts.Chart(options);</pre>
	</div>
	
	<h3>Methods</h3>
	<div class="member">
		<span class="name">addSeries</span>
		<span class="parameters">(Object options, [Boolean redraw], [Mixed animation])</span>
		<span class="type">Series</span>

		<div class="description">
			<p>Add a series to the chart after render time. Note that this method should never be used
			when adding data synchronously at chart render time, as it adds expense to the calculations
			and rendering. When adding data at the same time as the chart is initiated, add the series
			as a configuration option instead. In a StockChart with the navigator enabled, the base series
			can't be added dynamically.</p>
			<h4>Parameters</h4>
			<ul>
				<li>
					options: Object<br/>
					The series options, as documented under 
					<a class="internal" href="#plotOptions-series">plotOptions.series</a>

					and under the plotOptions for each series type.
				</li>
				<li>
					redraw: Boolean<br/>
					Defaults to <code>true</code>. Whether to redraw the chart after the series is added. See the <code>redraw()</code>
					method below.
				</li>

				<li>
					animation: Mixed<br/>
					Defaults to true. When true, the series' updating will be animated with default animation
					options. The animation can also be a configuration object with properties <code>duration</code>
					and <code>easing</code>. 
				</li>
			</ul>
			<h4>Returns</h4>

			<ul>
				<li>The series added, if successful.</li>
			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-addseries/">Add series from a button</a>
		</div>
	</div>

	
	<div class="member">
		<span class="name">destroy</span>
		<span class="parameters">()</span>
		<span class="type"></span>
		<div class="description">
			<p>Removes the chart and purges memory. This method should be called before
			writing a new chart into the same container. It is called internally on window unload
			to prevent leaks.</p>			
		</div>
		<div class="demo">

			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-destroy/">Destroy the chart from a button</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">exportChart</span>
		<span class="parameters">(Object options, Object chartOptions)</span>
		<span class="type">null</span>

		<div class="description">
			<p>Exporting module required. Submit an SVG version of the chart to a server
			along with some parameters for conversion.</p>
			<h4>Parameters</h4>
			<ul>
				<li>options: Object<br/>
					Exporting options. Out of the <a class="internal" href="#exporting">exporting</a>

					options, the following options can be given as parameters to the exportChart method.
					All options default to the values given in the exporting config optins.
					<code>filename</code>: the filename for the export without extension, 
					<code>url</code>: the URL for the server module to do the conversion, 
					<code>width</code>: the width of the PNG or JPEG image generated on the server,
					<code>type</code>: the MIME type of the converted image.
				</li>
				<li>chartOptions: Object<br/>
					Additional chart options for the exported chart. For example a different 
					background color can be added here.
				</li>	
			</ul>

		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-exportchart/">Export chart</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">get</span>
		<span class="parameters">(String id)</span>

		<span class="type">Axis|Series|Point</span>
		<div class="description">
			<p>Get an axis, series or point by its <code>id</code> as given in the configuration options.</p>
			<h4>Parameters</h4>
			<ul>
				<li>

					id: String<br/>
					The id of the axis, series or point to get.
				</li>
			</ul>
			<h4>Returns</h4>
			<ul>
				<li>The first Axis, Series or Point with a matching id if found, <code>null</code> if not.</li>

			</ul>
		</div>
		
	</div>
	
	<div class="member">
		<span class="name">getSelectedPoints</span>
		<span class="parameters">()</span>
		<span class="type">Array&lt;Point&gt;</span>

		<div class="description">
			<p>Returns an array of all currently selected points in the chart. Points can be selected either 
			programmatically by the <code>point.select()</code> method or by clicking.</p>
			<h4>Returns</h4>
			<ul><li>An array of the selected points.</li></ul>
		</div>
	</div>

	
	<div class="member">
		<span class="name">getSelectedSeries</span>
		<span class="parameters">()</span>
		<span class="type">Array&lt;Series&gt;</span>
		<div class="description">
			<p>Returns an array of all currently selected series in the chart. Series can be selected either 
			programmatically by the <code>series.select()</code> method or by checking the checkbox
			next to the legend item if <code>series.showCheckBox</code> is true.</p>

			<h4>Returns</h4>
			<ul><li>An array of the selected Series items.</li></ul>			
		</div>
	</div>
	
	<div class="member">
		<span class="name">getSVG</span>
		<span class="parameters">(Object additionalOptions)</span>

		<span class="type">String</span>
		<div class="description">
			<p>Exporting module required. Get an SVG string representing the chart.</p>
			<h4>Parameters</h4>
			<ul>
				<li>additionalOptions: Object<br/>
				Chart options to add to the exported chart in addition to the options given for
				the original chart. For example if series.lineWidth should be greater in the 
				exported chart than in the original, or the chart should have a different 
				background color, this is added here.</li>			
			</ul>

		</div>
	</div>
	
	<div class="member">
		<span class="name">hideLoading</span>
		<span class="parameters">()</span>
		<span class="type">null</span>
		<div class="description">

			<p>Hide the loading screen. Options for the loading
			screen are defined at <a class="internal" href="#loading">options.loading</a>.</p>			
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-show-hide-loading/">Show and hide loading from a button</a> 
		</div>
	</div>
	
	<div class="member">
		<span class="name">print</span>

		<span class="parameters">()</span>
		<span class="type">null</span>
		<div class="description">
			<p>Exporting module required. Clears away other elements in the page and prints
			the chart as it is displayed. By default, when the exporting module is enabled,
			a button at the upper right calls this method.</p>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/fXHB5/32/">Print from a HTML button</a> 
		</div>

	</div>
	
	<div class="member">
		<span class="name">redraw</span>
		<span class="parameters">()</span>
		<span class="type">null</span>
		<div class="description">
			<p>Redraw the chart after changes have been done to the data or axis extremes. All methods
			for updating axes, series or points have a parameter for redrawing the chart. This is
			<code>true</code> by default. But in many cases you want to do more than one operation
			on the chart before redrawing, for example add a number of points. In those cases it is
			a waste of resources to redraw the chart for each new point added. So you add the points
			and call <code>chart.redraw()</code> after.</p>

			<p>The <code>chart.redraw()</code> method only
			redraws those parts of the chart that are actually changed. If the data of a series is 
			changed and it doesn't affect the axes, only the series itself is redrawn. If the new
			data requires the axis extremes to be altered, the axis and all other series depending
			on it are redrawn.</p>			
		</div>
	</div>
	<div class="member">
		<span class="name">setSize</span>
		<span class="parameters">(Number width, null, [Mixed animation])</span>

		<span class="type"></span>
		<div class="description">
			<p>Resize the chart to a given width. Height is currently not supported by Stock charts.</p>
			
			<h4>Parameters</h4>
			<ul>
				<li>
					width: Number<br/>

					The new pixel width of the chart.
				</li>
				<li>
					height: Not implemented yet<br/>
					
				</li>
				<li>
					animation: Mixed<br/>
					Defaults to true. When true, the resize will be animated with default animation
					options. The animation can also be a configuration object with properties <code>duration</code>

					and <code>easing</code>. 
				</li>
			</ul>
		</div>
	</div>
	<div class="member">
		<span class="name">setTitle</span>
		<span class="parameters">(Object title, object subtitle)</span>

		<span class="type"></span>
		<div class="description">
			<p>Set a new title or subtitle for the chart</p>
			
			<h4>Parameters</h4>
			<ul>
				<li>
					title: Object<br/>

					A configuration object for the new title as defined at <a class="internal" href="#title">#title</a>.					
				</li>
				<li>
					subtitle: Object<br/>					
					A configuration object for the new subtitle as defined at <a class="internal" href="#subtitle">#subtitle</a>.
				</li>
			</ul>
		</div>

	</div>
	<div class="member member-last">
		<span class="name">showLoading</span>
		<span class="parameters">(String str)</span>
		<span class="type">null</span>
		<div class="description">
			<p>Dim the chart's plot area and show a loading label text. Options for the loading
			screen are defined at <a class="internal" href="#loading">options.loading</a>. A custom
			text can be given as a parameter for loadind</p>			
		</div>

		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-show-hide-loading/">Show and hide loading from a button</a>
		</div>
	</div>
	
	<h3>Properties</h3>
	<div class="member">
		<span class="name">container</span>

		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			A reference to the containing HTML element as given in <code>chart.renderTo</code>.
		</div>
	</div>
	<div class="member">
		<span class="name">options</span>

		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			The options stucture for the chart.
		</div>
	</div>
	<div class="member">
		<span class="name">series</span>

		<span class="type">Array&lt;Object&gt;</span>
		<span class="default"></span>
		<div class="description">
			An array of all the chart's series.
		</div>
	</div>
	<div class="member">
		<span class="name">xAxis</span>

		<span class="type">Array&lt;Object&gt;</span>
		<span class="default"></span>
		<div class="description">
			An array of the chart's x axes. If only one x axis, it is referenced by <code>chart.xAxis[0]</code>.
		</div>
	</div>
	<div class="member member-last">

		<span class="name">yAxis</span>
		<span class="type">Array&lt;Object&gt;</span>
		<span class="default"></span>
		<div class="description">
			An array of the chart's y axes. If only one y axis, it is referenced by <code>chart.yAxis[0]</code>.
		</div>
	</div>

	
	
</div>

<div class="class-item" id="axis-object">
	<h2>The Axis object</h2>
	<div class="section-description">
		<p>A chart can have from 0 axes to multiples. In a normal, single series
		cartesian chart, there is one X axis and one Y axis.</p>
		
		<p>The X axis or axes are referenced
		by <code>chart.xAxis</code>, which is an array of Axis objects. If there is only one
		axis, it can be referenced through <code>chart.xAxis[0]</code>, and multiple axes have
		increasing indices. The same pattern goes for Y axes.</p>

		
		<p>If you need to get the axes from a series object, use the <code>series.xAxis</code> and
		<code>series.yAxis</code> properties. These are not arrays, as one series can only be associatedd
		to one X and one Y axis.</p>
		
		<p>A third way to reference the axis programmatically is by id. Add an id in the 
		axis configuration options, and get the axis by <code>chart.get(id)</code>.</p> 
		
		<p>Configuration options for the axes are given in <a class="internal" href="#xAxis">
		options.xAxis</a> and <a class="internal" href="#yAxis">options.yAxis</a>.</p>

	</div>
	
	<h3>Methods</h3>
	<div class="member">
		<span class="name">addPlotBand</span>
		<span class="parameters">(Object options)</span>
		<span class="type"></span>
		<div class="description">

			<p>Add a plot band after render time.</p>
			<h4>Parameters</h4>
			<ul>
				<li>options: Object<br/>
				A configuration object consisting of the same members as 
				<a class="internal" href="#xAxis-plotBands">options.xAxis.plotBands</a></li>
			
			</ul>

		</div>
	</div>
	<div class="member">
		<span class="name">addPlotLine</span>
		<span class="parameters">(Object options)</span>
		<span class="type"></span>
		<div class="description">
			<p>Add a plot line after render time.</p>

			<h4>Parameters</h4>
			<ul>
				<li>options: Object<br/>
				A configuration object consisting of the same members as 
				<a class="internal" href="#xAxis-plotLines">options.xAxis.plotLines</a></li>
			</ul>
		</div>
	</div>

	<div class="member">
		<span class="name">getExtremes</span>
		<span class="parameters">()</span>
		<span class="type">Object</span>
		<div class="description">
			<p>Get the current extremes for the axis.</p>
			<h4>Returns</h4>

			<p>An object containing the following properties:</p>
			<ul>
				<li>dataMax: The maximum value of the axis' associated series.</li>
				<li>dataMin: The minimum value of the axis' associated series.</li>
				<li>max: The maximum axis value, either automatic or set manually. If 
				the <code>max</code> option is not set and <code>maxPadding</code> is
				0, this value will be the same as <code>dataMax</code>.</li>

				<li>min: The minimum axis value, either automatic or set manually. If 
				the <code>min</code> option is not set and <code>minPadding</code> is
				0, this value will be the same as <code>dataMin</code>.</li>
			</ul>
		</div>
	</div>

	<div class="member">
		<span class="name">setExtremes</span>
		<span class="parameters">(Number min, Number max, [Boolean redraw], [Mixed animation])</span>
		<span class="type"></span>
		<div class="description">
			<p>Set the minimum and maximum of the axes after render time. If the 
			<code>startOnTick</code> and <code>endOnTick</code> options are true,
			the minimum and maximum values are rounded off to the nearest tick. To prevent
			this, these options can be set to false before calling setExtremes.</p>

			<h4>Parameters</h4>
			<ul>
				<li>min: Number<br/>
				The new minimum value</li>
				<li>max: Number<br/>
				The new maximum value</li>

				<li>redraw: Boolean<br/>
				Defaults to <code>true</code>. Whether to redraw the chart or wait for an explicit call to <code>chart.redraw()</code>.</li>
				<li>
					animation: Mixed<br/>
					Defaults to true. When true, the resize will be animated with default animation
					options. The animation can also be a configuration object with properties <code>duration</code>

					and <code>easing</code>. 
				</li>
			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/axis-setextremes/">Set extremes from button</a>
		</div>
	</div>

	<div class="member">
		<span class="name">removePlotBand</span>
		<span class="parameters">(String id)</span>
		<span class="type"></span>
		<div class="description">
			<p>Remove a plot band by its <code>id</code>.</p>

			<h4>Parameters</h4>
			<ul>
				<li>id: String<br/>
				The plot band's <code>id</code> as given in the original configuration object or
				in the addPlotBand method.</li>
			</ul>
		</div>

	</div>
	<div class="member member-last">
		<span class="name">removePlotLine</span>
		<span class="parameters">(String id)</span>
		<span class="type"></span>
		<div class="description">
			<p>Remove a plot line by its <code>id</code>.</p>

			<h4>Parameters</h4>
			<ul>
				<li>id: String<br/>
				The plot line's <code>id</code> as given in the original configuration object or
				in the addPlotLine method.</li>
			</ul>
		</div>

	</div>
	
</div>

<div class="class-item" id="series-object">
	<h2>The Series object</h2>
	<div class="section-description">
		<p>The Series object is the JavaScript representation of each line, area series, pie etc.</p>
		<p>The object can be accessed in a number of ways. All series and point event handlers
		give a reference to the series object. The <code>chart</code> object has a <code>series</code>

		property that is a collection of all the chart's series. The <code>point</code> objects
		also have the same reference.
		</p>
		<p>Another way to reference the series programmatically is by id. Add an id in the 
		series configuration options, and get the series object by <code>chart.get(id)</code>.</p>
		
		<p>Configuration options for the series are given in three levels. Options
		for all series in a chart are given in the <a class="internal"
		href="#plotOptions.series">plotOptions.series</a> object. Then options for all series
		of a specific type are given in the plotOptions of that type, for example plotOptions.line.
		Next, options for one single series are given in <a class="internal" href="#series">the 
		series array</a>.</p>

	</div>
	
	<h3>Methods</h3>
	<div class="member">
		<span class="name">addPoint</span>
		<span class="parameters">(Object options, [Boolean redraw], [Boolean shift], [Mixed animation])</span>
		<span class="type"></span>
		<div class="description">

			<p>Add a point to the series after render time.</p>
			<h4>Parameters</h4>
			<ul>
				<li>
					options: Number|Array|Object<br/>
					The point options. If options is
					a single number, a point with that y value is appended to the series.
					If it is an array, it will be interpreted as x and y values respectively, or in
					the case of OHLC or candlestick, as <code>[x, open, high, low, close]</code>. 
					If it is an object, advanced options as outlined under <a class="internal"
					href="#point">options.point</a> are applied.
				</li>

				<li>
					redraw: Boolean<br/>
					Defaults to <code>true</code>. Whether to redraw the chart after the point is added. 
					When adding more than
					one point, it is highly recommended that the <code>redraw</code> option be
					set to false, and instead <code>chart.redraw()</code> is explicitly called
					after the adding of points is finished. 
				</li>
				<li>

					shift: Boolean<br/>
					Defaults to <code>false</code>. When shift is true, one point is shifted off 
					the start of the series as one is appended to the end. Use this option for 
					live charts monitoring a value over time. 
				</li>
				<li>
					animation: Mixed<br/>
					Defaults to true. When true, the graph will be animated with default animation
					options. The animation can also be a configuration object with properties <code>duration</code>

					and <code>easing</code>. 
				</li>
			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/series-addpoint/">Append 100 points</a>,
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/series-addpoint-shift/">append and shift</a>			
		</div>

	</div>
	<div class="member">
		<span class="name">hide</span>
		<span class="parameters">()</span>
		<span class="type"></span>
		<div class="description">
			<p>Hides the series if visible. If the <code>chart.ignoreHiddenSeries</code> option is true,
			the chart is redrawn without this series.</p>

		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/series-show-hide/">Toggle visibility from a button</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">remove</span>
		<span class="parameters">([Boolean redraw])</span>

		<span class="type"></span>
		<div class="description">
			<p>Remove the series from the chart.</p>
			<h4>Parameters</h4>
			<ul>
				<li>
					redraw: Boolean<br/>

					Defaults to <code>true</code>. Whether to redraw the chart after the series is removed.
					If doing more operations on the chart, it is a good idea to set redraw to false
					and call <code>chart.redraw()</code> after. 
				</li>
			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/series-remove/">Remove first series from a button</a>

		</div>
	</div>
	
	<div class="member">
		<span class="name">show</span>
		<span class="parameters">()</span>
		<span class="type"></span>
		<div class="description">
			<p>Shows the series if hidden.</p>

		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/stock/members/series-show-hide/">Toggle visibility from a button</a>
		</div>
	</div>
	
	<div class="member">
		<span class="name">select</span>
		<span class="parameters">([Boolean selected|null])</span>

		<span class="type"></span>
		<div class="description">
			<p>Select or unselect the series. This means its <code>selected</code> property is set,
			the checkbox in the legend is toggled and when selected, the series is returned in the 
			<code>chart.getSelectedSeries()</code> method. </p>
			<h4>Parameters</h4>
			<ul>

				<li>selected: Boolean|null<br/>
				When <code>true</code>, the series is selected. When <code>false</code> it is unselected.
				When <code>null</code> or <code>undefined</code>, the series' selection state is toggled.</li>
			</ul>

		</div>
	</div>
	
	<div class="member member-last">
		<span class="name">setData</span>
		<span class="parameters">(Array&lt;Mixed&gt; data, [Boolean redraw])</span>
		<span class="type"></span>

		<div class="description">
			<p>Apply a new set of data to the series and optionally redraw it.</p>
			<h4>Parameters</h4>
			<ul>
				<li>
					data: Array&lt;Number&gt;|Array&lt;Array&gt;|Array&lt;Object&gt;<br/>

					Takes an array of data in the same format as given at <a class="internal"
					href="#series">options.series</a> => data.
				</li>
				
				<li>
					redraw: Boolean<br/>
					Defaults to <code>true</code>. Whether to redraw the chart after the series is altered.
					If doing more operations on the chart, it is a good idea to set redraw to false
					and call <code>chart.redraw()</code> after. 
				</li>

			</ul>
		</div>
		<div class="demo">
			<a href="http://jsfiddle.net/ebuTs/16/">Set new data from a button</a>
		</div>
	</div>
	
	
	<h3>Properties</h3>
	<div class="member">

		<span class="name">chart</span>
		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			Read only. The chart that the series belongs to.
		</div>
	</div>
	<div class="member">

		<span class="name">data</span>
		<span class="type">Array</span>
		<span class="default"></span>
		<div class="description">
			Read only. An array with the series' data point objects. In case the series data length
 exceeds the cropThreshold, or if the data is grouped, series.data doesn't contain all the points. It
 only contains the points that have been created on demand. In these cases, all original X and Y values
 can be read from <code>series.xData</code> and <code>series.yData</code>. Additionally, <code>series.options.data</code>

 contains all configuration objects for the points, whether they be numbers, arrays or objects.
		</div>
	</div>
	<div class="member">
		<span class="name">name</span>
		<span class="type">String</span>
		<span class="default"></span>
		<div class="description">

			The series' name as given in the options.
		</div>
	</div>
	<div class="member">
		<span class="name">options</span>
		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">

			Read only. The series' options.
		</div>
	</div>
	<div class="member">
		<span class="name">selected</span>
		<span class="type">Boolean</span>
		<span class="default"></span>
		<div class="description">

			Read only. The series' selected state as set by <code>series.select()</code>.
		</div>
	</div>
	<div class="member">
		<span class="name">type</span>
		<span class="type">String</span>
		<span class="default"></span>

		<div class="description">
			Read only. The series' type, like "line", "area" etc.
		</div>
	</div>
	<div class="member">
		<span class="name">visible</span>
		<span class="type">Boolean</span>
		<span class="default"></span>

		<div class="description">
			Read only. The series' visibility state as set by <code>series.show()</code>, <code>
			series.hide()</code>, or the initial configuration.
		</div>
	</div>
	<div class="member">
		<span class="name">xAxis</span>

		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			Read only. The unique xAxis object associated with the series.
		</div>
	</div>
	<div class="member">
		<span class="name">yAxis</span>

		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			Read only. The unique yAxis object associated with the series.
		</div>
	</div>
	
</div>

<div class="class-item" id="point-object">
	<h2>The Point object</h2>

	
	<div class="section-description">
		<p>The Point object is the JavaScript representation of each data point</p>
		<p>The object can be accessed in a number of ways. In all point event handlers the 
		point object is <code>this</code>. In the <code>series</code> object all the points
		are accessed by the <code>series.data</code> array.</p>
		
		<p>Another way to reference the point programmatically is by id. Add an id in the 
		point configuration options, and get the point object by <code>chart.get(id)</code>.</p>

	</div>
	
	<h3>Methods</h3>
	<div class="member">
		<span class="name">remove</span>
		<span class="parameters">([Boolean redraw], [Mixed animation])</span>
		<span class="type"></span>
		<div class="description">

			<p>Remove the point from the series.</p>
			<h4>Parameters</h4>
			<ul>
				<li>
					redraw: Boolean<br/>
					Defaults to <code>true</code>. Whether to redraw the chart after the point is removed.
					If doing more operations on the chart, it is a good idea to set redraw to false
					and call <code>chart.redraw()</code> after. 
				</li>

				<li>
					animation: Mixed<br/>
					Defaults to true. When true, the graph's updating will be animated with default animation
					options. The animation can also be a configuration object with properties <code>duration</code>
					and <code>easing</code>. 
				</li>
			</ul>
		</div>

	</div>
	
	<div class="member">
		<span class="name">select</span>
		<span class="parameters">([Boolean select], [Boolean accumulate])</span>
		<span class="type"></span>
		<div class="description">
			<p>Select or unselect the point.</p>

			<h4>Parameters</h4>
			<ul>
				<li>
					select: Boolean<br/>
					When <code>true</code>, the point is selected. When <code>false</code>, the 
					point is unselected. When <code>null</code> or <code>undefined</code>, the selection
					state is toggled.
				<li>

					accumulate: Boolean<br/>
					When <code>true</code>, the selection is added to other selected points. When 
					<code>false</code>, other selected points are deselected. Internally in Highcharts,
					selected points are accumulated on Control, Shift or Cmd clicking the point.
				</li>
			</ul>
		</div>
	</div>
	
	<div class="member member-last">

		<span class="name">update</span>
		<span class="parameters">([Mixed options], [Boolean redraw], [Mixed animation])</span>
		<span class="type"></span>
		<div class="description">
			<p>Update the point with new values.</p>
			<h4>Parameters</h4>
			<ul>

				<li>
					options: Number|Array|Object<br/>
					The point options. If options is
					a single number, the point will be given that number as the y value.
					If it is an array, it will be interpreted as x and y values respectively. 
					If it is an object, advanced options as outlined under <a class="internal"
					href="#point">options.point</a> are applied.
				</li>
				<li>
					redraw: Boolean<br/>
					Defaults to <code>true</code>. Whether to redraw the chart after the point is updated.
					If doing more operations on the chart, it is a good idea to set redraw to false
					and call <code>chart.redraw()</code> after. 
				</li>

				<li>
					animation: Mixed<br/>
					Defaults to true. When true, the update will be animated with default animation
					options. The animation can also be a configuration object with properties <code>duration</code>
					and <code>easing</code>. 
				</li>
			</ul>
		</div>

		
	</div>
	
	<h3>Properties</h3>	
	<div class="member">
		<span class="name">category</span>
		<span class="type">String|Number</span>
		<span class="default"></span>
		<div class="description">
			For categorized axes this property holds the category name for the point. For other
			axis it holds the x value.
		</div>

	</div>	
	<div class="member">
		<span class="name">percentage</span>
		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">
			The percentage for points in a stacked series.
		</div>
	</div>

	<div class="member">
		<span class="name">selected</span>
		<span class="type">Boolean</span>
		<span class="default"></span>
		<div class="description">
			Whether the point is selected or not.
		</div>
	</div>

	<div class="member">
		<span class="name">series</span>
		<span class="type">Object</span>
		<span class="default"></span>
		<div class="description">
			The series object associated with the point.
		</div>
	</div>

	<div class="member">
		<span class="name">x</span>
		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">
			The x value for the point.
		</div>
	</div>

	<div class="member">
		<span class="name">y</span>
		<span class="type">Number</span>
		<span class="default"></span>
		<div class="description">
			The y value for the point.
		</div>
	</div>

	
</div></div>

</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-2995052-3");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

